angularjs 指令我想创建一个带有按钮的 html 模板

Question

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>

Answer 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'
  }; 
});

截图

angularjs 指令我想创建一个带有按钮的 html 模板

angularjs directive i want to create a html template with button

angularjs

angular-ui

angularjs-directive

angularjs-scope