AngularJS自定義指令 - 控制器變量'串擾'

我是AngularJS的新手，嘗試創建我的第一個自定義指令。AngularJS自定義指令 - 控制器變量'串擾'

其實我創建了兩個指令，每個指令都使用它自己的控制器。也許我錯了，但我希望每個指令控制器都使用它自己的獨立$ scope。但在'指令一'的模板中，我可以從'指令二'中調用一個變量，反之亦然。

如何爲每個指令獲取一個獨立的$ scope，以便每個指令的模板只能使用它自己的變量？

的index.html：

<!DOCTYPE html> 
<html ng-app="application"> 

    <head> 
    <script src="https://code.angularjs.org/1.2.28/angular.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1>Testing Custom Directives</h1> 
    <hr /> 
    <directive-one></directive-one> 
    <directive-two></directive-two> 
    </body> 

</html>

的script.js：

var app = angular.module('application', [ ]); 

app.directive('directiveOne', function(){ 
    return { 
    restrict: 'E', 
    template: '<h3>Directive 1</h3> {{dirCtrlOne.name}} {{dirCtrlTwo.year}}', 
    controller:function(){ 
     this.name = 'John'; 
    }, 
    controllerAs: 'dirCtrlOne' 
    } 
}); 

app.directive('directiveTwo', function(){ 
    return { 
    restrict: 'E', 
    template: '<h3>Directive 2</h3> {{dirCtrlTwo.year}} {{dirCtrlOne.name}}', 
    controller:function(){ 
     this.year = 1990; 
    }, 
    controllerAs: 'dirCtrlTwo' 
    } 
});

來源

2015-04-27 Mountain

寫scope: {}從任何父範圍（S）

隔離指令的範圍從AngularJS documentation

由於名稱暗示，該指令的隔離範圍將除您明確添加到範圍的模型之外的所有內容隔離：散列對象。{} 散列對象。這在構建可重用組件時很有用，因爲它可以防止組件改變您的模型狀態，但您明確地通過的型號除外。

來源

2015-04-27 19:37:44

默認情況下一個指令繼承了它的父，並通過添加變量指令的範圍的範圍補充說，到父母也是如此。這就是爲什麼你的指令可以訪問其他變量。爲了有隔離，請試試這個代碼的範圍：在你的指令

var app = angular.module('application', [ ]); 

app.directive('directiveOne', function(){ 
    return { 
    restrict: 'E', 
    scope: true, 
    template: '<h3>Directive 1</h3> {{dirCtrlOne.name}} {{dirCtrlTwo.year}}', 
    controller:function(){ 
    this.name = 'John'; 
    }, 
    controllerAs: 'dirCtrlOne' 
} 
}); 

app.directive('directiveTwo', function(){ 
    return { 
     restrict: 'E', 
     scope: true, 
     template: '<h3>Directive 2</h3> {{dirCtrlTwo.year}} {{dirCtrlOne.name}}', 
     controller:function(){ 
     this.year = 1990; 
    }, 
    controllerAs: 'dirCtrlTwo' 
} 
});

來源

2015-04-27 19:34:32 shivas

AngularJS自定義指令 - 控制器變量'串擾'

回答

相關問題