Question

我创建了2个用于显示框（confirmedBox指令）的指令和用于显示该框（确认框）的指令。在confirmingBox的内部链接功能中，我通过使用父作用域confirmedBox进行编译来创建confirmingBox。但是，当单击“显示框”按钮时，它会显示为显示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>

Answer 1

您要将模板与boxScope相关联，但在displayBox = true上设置scope。

将其更改为：

boxScope.displayBox = true;

您还需要在编译和链接之前执行此操作，或者在undefined的链接功能执行时为confirmingBox。

最后，要么在末尾调用scope.$apply()而不用参数，要么用点击函数包装所有内容。

我更喜欢第二个替代方案，因为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

编译的子指令附加到父级但不能访问父级范围？

1 个答案: