編譯后的子指令附加到父項，但是無法訪問父項作用域？

Question

我創建了2指令，一個顯示框（ confirmedBox為表明盒（confirmingBox）指令）和一個。 里面的鏈接功能confirmingBox ，我創建confirmedBox通過parent范圍編制是confirmingBox 。 但是，單擊“顯示框”按鈕時，它會記錄isDisplay undefined ，這意味着我無法對從父指令到子指令的變量isDisplay進行2種方式綁定。 我不知道為什么它不起作用？

實時代碼： 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鏈接，但是在scope上設置了displayBox = true 。

更改為：

boxScope.displayBox = true;

您還需要在編譯和鏈接之前執行此操作，否則當confirmingBox的鏈接功能執行時，它將是undefined的。

最后，要么在沒有參數的情況下調用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

編譯后的子指令附加到父項，但是無法訪問父項作用域？

問題描述

1 個解決方案

解決方案1
1 已采納 2014-11-08 15:55:21

編譯后的子指令附加到父項，但是無法訪問父項作用域？

問題描述

1 個解決方案

解決方案1 1 已采納 2014-11-08 15:55:21

解決方案1
1 已采納 2014-11-08 15:55:21