Question

最近我遇到了一个问题，就是要了解如何动态更改AngularJS中指令的内容。

首先，在我的HTML中，我有一个包含子指令的父指令。有时，我想刷新父指令的内容，但是我试图注入的子指令没有被AngularJS初始化。我做了一个JSFiddle来解释我的问题：http://jsfiddle.net/koj2e1th/2/

当我使用$ timeout更新内容时，指令未初始化：

if(condition == true)
        {
            sampleBackgroundLabel.textColor = UIColor.whiteColor()
        }
        else
        {
            sampleBackgroundLabel.textColor = UIColor.blueColor()

        }

我尝试使用$ compile（在其他问题上看到这个），但我没有设法让它正常工作。你能解释一下如何在这种情况下让$ compile工作，并让我的$timeout(function(){ html = '<child-dir>TIMEOUT</child-dir>' scope.content = $sce.trustAsHtml(html) }, 2500)正确呈现吗？

提前致谢！

Answer 1

未编译child-dir指令。在将指令添加到DOM之前，应该使用作用域进行编译。 click here

var demo = angular.module('demo', []);
demo.directive('parentDir', function($sce, $timeout, $compile) {
    return {
        restrict: 'E',
            transclude: true,
            template: '<div ng-bind-html="content"></div>',
        link: function (scope, element, attrs, controller, transcludeFn) {
            transcludeFn(function(html) {
              $timeout(function() {
                html = _.reduce(html, function(carry, domElement) {
                  if (domElement.outerHTML) {
                      return carry + domElement.outerHTML
                  } else {
                    return carry;
                  }
                }, '')
                scope.content = $sce.trustAsHtml(html)
              })
            })
            var el = $compile( "<child-dir>TIMEOUT</child-dir>" )(scope );
            element.parent().append( el );
        }
    }});

demo.directive('childDir', function($sce) {
    return {
        restrict: 'E',
            transclude: true,
            template: '<div>CHILD DIR</div>'
    }});

Answer 2

根据您提供的代码段，您似乎正在尝试自行处理翻译。

实际上，您不需要这样做，只要tranclude属性和ng-transclude属性可供您使用。

您可以优化指令定义以适应以下功能：

/* ... */
.directive('parentDir', function(){
   return {
     transclude: true,
     link: function(){ /* Any DOM manipulation logic if required */ },
     template: '<div ><h2>Parent Directive</h2><div ng-transcude></div></div>'
   };
})
.directive('childDir', function(){
   return {
     transclude: true,
     template: '<div ><h4>Child directive</h4><div ng-transclude></div></div>'
   };
});

注意模板中ng-transclude属性的用法。这告诉AngularJS 将确切地放置被转换的元素/指令。

因此，如果您的指令采用以下格式：

<parent-dir>
   <child-dir></child-dir>
</parent-dir>

<child-dir>将放置在最终已编译版本的<div ng-transclude>模板的<parent-dir>部分。

Transclude和ng-bind：如何呈现子指令？

2 个答案:

Demo