編譯後的子指令會附加到父級，但無法訪問父級範圍？

我創建了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

編譯後的子指令會附加到父級，但無法訪問父級範圍？

回答

相關問題