Javascript 如何在compile-AngularJS的post函数中添加元素_Javascript_Jquery_Angularjs

Javascript 如何在compile-AngularJS的post函数中添加元素

javascript jquery angularjs

Javascript 如何在compile-AngularJS的post函数中添加元素,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,这就是我的问题。我有两个指令（比如父指令和子指令），我从父指令调用子指令，如下所示： angular.module('components', []) .directive('helloWorld', function() { return { restrict: 'E', compile: function(element, attrs) { var x = '<directive2></direc

这就是我的问题。我有两个指令（比如父指令和子指令），我从父指令调用子指令，如下所示：

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'])

角度模块（'组件'，[]） .directive（'helloWorld'，function（）{ 返回{ 限制：'E'，编译：函数（元素、属性）{ var x=“”；元素。追加（x）； } } }) .directive（“directive2”，函数（$compile，$parse）{ 返回{ 限制：'E'，编译：函数（IELENT、iAttrs、transclude）{ 附加（“directive2

”）； } } }); angular.module（'HelloApp'，['components']））这个很好用。但现在我正在compile的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'])

角度模块（'组件'，[]） .directive（'helloWorld'，function（）{ 返回{ 限制：'E'，编译：函数（元素、属性）{ 返回{ post：功能（范围、元素、属性）{ var x=“”；元素。追加（x）； } } } } }) .directive（“directive2”，函数（$compile，$parse）{ 返回{ 限制：'E'，编译：函数（IELENT、iAttrs、transclude）{ 附加（“directive2

”）； } } }); angular.module（'HelloApp'，['components']））我不知道出了什么问题。引导我成为朋友

尝试为第一条指令定义模板：

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

角度模块（'组件'，[]） .directive（'helloWorld'，function（）{ 返回{ 限制：'E'，模板：“” } } })

尝试为第一条指令定义模板：

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

角度模块（'组件'，[]） .directive（'helloWorld'，function（）{ 返回{ 限制：'E'，模板：“” } } })

在添加以下内容之前，您需要使用

$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']);

角度模块（'组件'，[]） .directive（'helloWorld'，函数（$compile）{ 返回{ 限制：'E'，链接：函数（范围、元素、属性）{ var x=角度元素（“”）；追加（$compile（x）（scope））； } } }) .指令（“指令2”，函数（）{ 返回{ 限制：'E'，编译：函数（元素、属性、转置）{ 元素。追加（“directive2

”）； } } }); 角度模块（'HelloApp'，['components']）；

在添加以下内容之前，您需要使用

$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']);

”）； } } }); 角度模块（'HelloApp'，['components']）；

谢谢您的回复。但是如果我定义了模板，即使post函数中的条件为false，它也会附加指令。我应该在post函数onlyOk中附加指令，在这种情况下，您应该手动编译模板。您应该在指令中注入$compile服务并编写以下代码：element.append（$compile（x）（scope））；我们可以在post函数中调用指令吗？？我需要在post函数中调用它“调用”是什么意思？My fiddle update在post函数中编译模板“”。因此，当第一个指令编译模板时，将“调用”该指令。也许我不明白你的问题谢谢你的回答。但是如果我定义了模板，即使post函数中的条件为false，它也会附加指令。我应该在post函数onlyOk中附加指令，在这种情况下，您应该手动编译模板。您应该在指令中注入$compile服务并编写以下代码：element.append（$compile（x）（scope））；我们可以在post函数中调用指令吗？？我需要在post函数中调用它“调用”是什么意思？My fiddle update在post函数中编译模板“”。因此，当第一个指令编译模板时，将“调用”该指令。也许我不明白你的问题