Question

该指令只是挂起整个网站..因为嵌套指令调用.. 解决这个问题，我是，abl

这是我的用例..

指令定义由：

给出

app.directive('bluet', function($rootScope,$compile) {
    return {
        scope: {}, 
        restrict: 'E',
        replace: true,
        controller: function($scope, $element, $attrs, $parse, $timeout,$transclude) {
            $scope.val1;
        },      
        templateUrl:"partials/bluetTemplate.html",

        link: function(scope, element, attrs) {
            attrs.$observe('val1', function(value) { 
                if(value && value != undefined) {
                    scope.val1 =  value;
                }
            });
        }

}

并且调用html看起来像......

 <bluet val1="{{ val1 +'1' }}"></bluet>

partials / bluetTemplate.html的ng-template类似于：

<div>
  <span ng-if="val1=='111'">
    <bluet val1="{{ val1 +'1' }}" ><bluet>           
    <!-- nested call -->
  </span>
  <span>
    {{val1}}
  </span>    
</div>

Answer 1

由于ngIf指令将检查＆＃34;结束条件＆＃34;在后链接阶段，虽然模板将在编译阶段进行编译，但它将是一个无限编译循环。

一种可能的方法是检查＆＃34;结束条件＆＃34; （即val1的值）在链接后阶段和（如有必要）动态创建，编译和插入新的<bluet>子元素。

例如：

app.directive('bluet', function($compile) {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        template: '<div><span>{{val1}}</span></div>',
        link: function postLink(scope, elem, attrs) {
            scope.val1 = attrs.val1;
            if ((scope.val1 !== undefined) && (scope.val1 !== '111')) {
                var bluet = angular.element(
                    '<bluet val1="' + scope.val1 + '1"></bluet>');
                $compile(bluet)(scope);
                elem[0].insertBefore(bluet[0], elem[0].firstChild);
            }
        }
    };
});

另请参阅此 short demo 。

angularjs嵌套指令，具有更改属性

1 个答案: