Question

我有一个AngularJS指令可以创建一个按钮。

单击此按钮时，我想向页面添加另一个AngularJS指令（组件）。

我该怎么做？

我的指令＆＃34;创建帖子＆＃34;按钮：

myApp.directive('newPostButton', ['$compile', function($compile) {
  return {
    link: function(scope, element, attrs){
      element.bind("click", function(){
        alert("HI!");
      });
    },
    template: '<button>New Post</button>'
  };
}]);

我和＃34;作曲家的指示＆＃34;元素，当＆＃34;创建帖子时出现＆＃34;点击：

myApp.directive('postComposer', ['$compile', function($compile) {
  return {
    link: function(scope, element, attrs){
      element.bind("click", function(){
        alert("POSTED!");
      });
    },
    template: '<div><textarea placeholder="Write a new post"></textarea><button>Post</button>'
  };
}]);

Answer 1

这并没有直接回答你的问题，但正如@New Dev和@Gratus D.所说，也许“jQueryish”DOM操作并不是最好的选择之路，也许new-post-button不应该指示所有

相反，你可以结合你的指令，只是切换你的“作曲家”的可见性，也许？

像...一样的东西。

imgur

用法就像

一样简单

<post-composer callback="vm.add(post)"></post-composer>

指令本身

/**
 * Compose a new post
 * @param  {Function} callback fn
 * @return {Object}   post
 * @return {String}   post.title
 * @return {String}   post.content
 */
app.directive('postComposer', function() {
  return {
    scope: {
      callback: '&'
    },
    link: function(scope, element, attrs) {
      function reset() {
        scope.isComposing = false;
        scope.content = null;
      }

      scope.submit = function() {
        var post = { title: 'new title', content: scope.content };
        scope.callback({ post: post });
        reset();
        //$.notify('Submitted', 'success');
      };

      scope.cancel = function() {
        reset();       
        //$.notify('Canceled', 'warn');
      };
    },
    templateUrl: 'post-composer-tpl.html'
  }; 
});

在哪里和HTML模板

<!-- new post -->
<div ng-show="!isComposing">
  <button type="button" 
          class="btn btn-default"
          ng-click="isComposing = !isComposing">
          New post
  </button>
</div>
<!-- compose -->
<div ng-show="isComposing">
  <textarea class="form-control" 
            ng-model="content"
            placeholder="Write a new post..."></textarea>
  <button type="button" 
          class="btn btn-default"
          ng-click="cancel()">
          Cancel
  </button>
  <button type="button" 
          class="btn btn-default"
          ng-disabled="!content"
          ng-click="submit()">
          Submit
  </button>
</div>

此处相关的Plunker http://plnkr.co/edit/zI6plp

Answer 2

您可以在单击处理程序中将编译指令附加到其所需的位置：

＆＃13;

var myApp = angular.module('myApp', []);

myApp.directive('newPostButton', ['$compile',
  function($compile) {
    return {
      link: function(scope, element, attrs) {
        element.bind("click", function() {
          angular.element(document.body).append($compile("<div data-post-composer></div>")(scope));
        });
      },
      template: '<button>New Post</button>'
    };
  }
]);

myApp.directive('postComposer', ['$compile',
  function($compile) {
    return {
      link: function(scope, element, attrs) {
        element.bind("click", function() {
          alert("POSTED!");
        });
      },
      template: '<div><textarea placeholder="Write a new post"></textarea><button>Post</button>'
    };
  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="myApp">
  <div data-new-post-button></div>
</section>

＆＃13;

使一个AngularJS指令在点击时向DOM添加另一个指令

2 个答案: