编译后的子指令会附加到父级，但无法访问父级范围？

我创建了2个指令用于显示框（confirmedBox指令）和一个用于显示框（确认框）的指令。在confirmingBox的内部链接函数中，我创建了confirmedBox，编译时父范围是confirmingBox。但是，当点击“显示框”按钮时，它会记录isDisplay undefined，这意味着我无法对从父指令到子指令的变量isDisplay进行双向绑定。我不知道为什么它不起作用？编译后的子指令会附加到父级，但无法访问父级范围？

代码住： http://plnkr.co/edit/SHH1JEtGJxibyem25kfd?p=preview

编写JavaScript代码：

angular.module('AppA2_Task',[]) 
.directive('confirmedClick', function ($compile, $rootScope) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      scope.displayBox = true; 
      element.on('click', function() { 
       element.attr('disabled', 'disabled'); 
       var boxScope = $rootScope.$new(true, scope); 
       var boxElem = $compile('<div data-confirming-box data-confirm="confirm" data-is-displayed="displayBox"></div>')(boxScope); 
       element.append(boxElem); 
       scope.$apply(function() { 
        scope.displayBox = true; 
       }); 
      }); 
     } 
    } 
}) 
.directive('confirmingBox', function() { 
    return { 
     //require: '^confirmedClick', 
     restrict: 'A', 
     template: "<div ng-if='isDisplayed'>I am a box</div>", 
     scope: { 
      isDisplayed: '=' 
     }, 
     link : function(scope){ 
      console.log('isDisplayed',scope.isDisplayed); 
     } 
    } 
}) 
.controller('MainController', function() { 

});

代码的html

<body data-ng-controller="MainController"> 
    <button data-confirmed-click>Show box</button> 
</body>

来源

2014-11-08 o0omycomputero0o

您与boxScope联的模板，但scope设置displayBox = true。

将其更改为：

boxScope.displayBox = true;

您还需要编译和链接之前，要做到这一点，否则就会被undefined时confirmingBox执行链接功能。

最后，或者在最后没有参数的情况下调用scope.$apply()，或者将它包含在click函数中。

我更喜欢第二个替代方案，因为Angular会将其内部包装在try...catch区块中，并且发生的任何异常都将传递给$exceptionHandler服务。

例子：

link: function(scope, element, attrs) { 
    element.on('click', function() { 
    scope.$apply(function() { 
     element.attr('disabled', 'disabled'); 
     var boxScope = $rootScope.$new(true, scope); 
     boxScope.displayBox = true; 
     var boxElem = $compile('<div data-confirming-box data-confirm="confirm" data-is-displayed="displayBox"></div>')(boxScope); 
     element.append(boxElem); 
    }); 
    }); 
}

演示：http://plnkr.co/edit/OwcgD0NntVo3DhTVvXmA?p=preview

来源

2014-11-08 15:55:21 tasseKATT

这似乎是我必须在编译时和编译时boxElem都会有它自己的范围，而不是使用boxScope的范围。谢谢。 – o0omycomputero0o 2014-11-09 03:45:26

编译后的子指令会附加到父级，但无法访问父级范围？

回答

相关问题