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 :(得分:1)
嗯,例如......
HTML页面模板
<body ng-controller="Ctrl">
<b>Comment</b>
<add-comment comments="comments"></add-comment>
<div ng-repeat="comment in comments">
> {{ 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'
};
});
截图