0
var ImagesApp = angular.module('Images', []); 

ImagesApp.directive('fancybox', function($q, $http, $templateCache) { 
    return function(scope, element, attrs) { 
    scope.ShowFullImageByClick = function() { 
     var el = '<input type="submit" id="comment-btn" class="mybtn" value="Comment" ng-click="AddComment()">' 
     $.fancybox.open(el); 
    } 
    } 
}); 

<div id='full-image-view' style="display: none;" fancybox> 
    <div id='full-image-view-left'></div> 
</div> 
+0

вы можете использовать параметр templateUrl для шаблона HTML – cyan

+0

привет и спасибо вы можете показать мне пример – oozy

+0

это в материалах данного урока: https: // WWW. codeschool.com/courses/shaping-up-with-angular-js – cyan

ответ

1

Ну, к примеру ...

шаблон HTML страницы

<body ng-controller="Ctrl"> 
    <b>Comment</b> 
    <add-comment comments="comments"></add-comment> 
    <div ng-repeat="comment in comments"> 
    &gt; {{ comment }} 
    </div> 
</body> 

шаблон Директива

<div> 
    <form> 
    <div class="input-group"> 
     <input class="form-control" 
       type="text" 
       placeholder="Add your comment..." 
       ng-model="comment"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" 
        type="button" 
        ng-click="add()"> 
      Add comment 
     </button> 
     </span> 
    </div> 
    </form> 
</div> 

JavaScript

var app = angular.module('plunker', []); 

app.controller('Ctrl', function($scope) { 
    $scope.comments = ['comment 1','comment 2']; 
}); 

app.directive('addComment', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     comments: '=' 
    }, 
    controller: function($scope) { 
     $scope.add = function() { 
     if ($scope.comment) { 
      $scope.comments.push($scope.comment); 
      $scope.comment = null; 
     } 
     }; 
    }, 
    templateUrl: 'add-comment-directive.html' 
    }; 
}); 

Скриншот

imgur

+0

большое спасибо :) – oozy

Смежные вопросы