如何在编译的后期函数中追加元素 - AngularJS

时间:2016-05-09 14:52:53

标签: javascript jquery angularjs

所以,这是我的问题。我有两个指令(比如父指令和子指令),我从父指令调用child指令,如下所示:

angular.module('components', [])
  .directive('helloWorld', function() {
     return {
         restrict: 'E',
         compile: function(element, attrs) {
              var x = '<directive2></directive2>';
              element.append(x);
         }
     }
   })
  .directive("directive2", function($compile, $parse) {
      return {
        restrict: 'E',
        compile: function(iElement, iAttrs, transclude) {
            iElement.append('<p>directive2</p>');
        }
      }
  });

angular.module('HelloApp', ['components'])

这很好用。但是现在我在编译的post函数中写了一个条件,当条件满足时,child指令应该追加。

我刚刚在post函数中添加了append函数,但它无效。

angular.module('components', [])
 .directive('helloWorld', function() {
  return {
    restrict: 'E',
    compile: function(element, attrs) {
      return {
        post: function(scope, element, attrs) {
        var x = '<directive2></directive2>';
        element.append(x);
      }
     }
   }
  }
})
.directive("directive2", function($compile, $parse) {
return {
  restrict: 'E',
  compile: function(iElement, iAttrs, transclude) {
    iElement.append('<p>directive2</p>');
   }
  }
});

angular.module('HelloApp', ['components'])

我不知道出了什么问题。引导我的朋友

jsFiddle

2 个答案:

答案 0 :(得分:1)

尝试将模板定义为第一个指令:

angular.module('components', [])
.directive('helloWorld', function() {
   return {
      restrict: 'E',
      template: '<directive2></directive2>'
   }
  }
})

答案 1 :(得分:1)

您需要先使用$compile服务,然后按以下方式添加:

angular.module('components', [])
  .directive('helloWorld', function($compile){
    return {
      restrict: 'E',
      link: function(scope, element, attrs) {
        var x = angular.element('<directive2></directive2>');
        element.append($compile(x)(scope));
      }
    }
  })
  .directive("directive2", function() {
    return {
      restrict: 'E',
      compile: function(element, attrs, transclude) {
        element.append('<p>directive2</p>');
      }
    }
  });

angular.module('HelloApp', ['components']);

http://jsfiddle.net/2zbabkjb/2/