爲什麼使用控制器嵌套指令時父範圍會中斷？

我的Web應用程序有多個頁面擁有自己的控制器。在這些頁面中，我使用了也有控制器的指令。所有控制器都使用controllerAs語法，它們全部設置爲vm。根據this文章這應該工作。但是，我無法將其與指令結合使用。在這種codepen我已經轉載了類似的情況：爲什麼使用控制器嵌套指令時父範圍會中斷？

http://codepen.io/csteur/pen/LGEdLy

在這個例子中父範圍也斷了，因爲嵌套指令。任何人都可以解釋爲什麼會發生這種情況，或者如何改變這種情況以使其發揮作用？

來源

2015-12-08 Chantal Steur

其工作的罰款。問題是什麼？ – Vivek

@VVK mainController的vm.title不會顯示 –

您需要使用目錄

angular.module('app', []); 

angular.module('app').controller("MainController", function(){ 
    var vm = this; 
    vm.title = 'AngularJS Nested Controller Example'; 
}); 

angular 
    .module('app') 
    .directive('nestedDirective', function() { 
    return { 
    restrict: 'E', 
    scope: {}, 
    controller: 'nestedDirectiveController', 
    controllerAs: 'vm', 
    template:'<div> {{vm.message}} </div>' 
    }; 
}); 

angular 
    .module('app') 
    .controller('nestedDirectiveController', nestedDirectiveController); 

function nestedDirectiveController() { 
    var vm = this; 
    this.message = "hoi"; 
}

檢查codepen到isolat你的位指示，如果你想： http://codepen.io/anon/pen/VeYxQg

通過這個link瞭解更多信息

來源

2015-12-08 13:05:29

我通過添加'scope：{}'行來獲得它的工作。我不確定'與目錄共享'是什麼意思，但我想你提供的鏈接解釋了這一點。感謝@Arvaan的快速回復 –

當你定義var vm = this;內nestedDirectiveController，vm的範圍僅限於nestedDirectiveController。

既然你指令有隔離範圍和您的模板使用此功能nestedDirectiveController來計算表達式，它得到標題值null，我們看到沒有標題。

如果你想共享範圍，那麼你可以在你的指令中提供scope : true配置。這樣該指令就獲得了自己的範圍，該範圍從原始範圍原型繼承。

angular 
    .module('app') 
    .directive('nestedDirective', function() { 
    return { 
    restrict: 'E', 
    scope: true, 
    controller: 'nestedDirectiveController', 
    controllerAs: 'vm', 
    template:'<div> {{vm.message}} </div>' 
    }; 
});

See Codepen

來源

2015-12-08 13:39:03 Vivek

爲什麼使用控制器嵌套指令時父範圍會中斷？

回答

相關問題