$範圍是全球行事

我想學習指令，我有一堆看起來像我的代碼下面的指令。但由於某種原因，如果我定義的每個指令都有一個「$ scope.data」或一個「$ scope.takeInClick」，它似乎從上次加載的指令中獲得了定義...

因此，例如如果「$ scope.data ='hello'」在一個指令中，並且「$ scope.data ='hi'」...如果後者指令最後被加載，但是如果我console.log（$ scope.data）在前指令，它會顯示'嗨'，而不是。

這很麻煩，我不知道爲什麼會發生這種情況？或者如果它的目的是？我想那是$ rootScope的價格，不是 $ scope。我試圖在指令定義中注入$ scope，但Angular似乎並不喜歡這樣。

有人可以幫助或解釋，請謝謝

app.directive('someDirective', function (SomeFactory1, SomeFactory2) { 

var controller = function ($scope) { 

    $scope.data; //Defined in all of my directives 

    function Initialize() { 
     $scope.data = { 
      stuff: '' 
     } 
    } 

    Initialize(); 

    $scope.takeInClick = function() { //Defined in all of my directives too 
     //Do Something 
    } 

}; 

return { 
    templateUrl: 'App_Data/Directives/Something/Something.html', 
    controller: controller 
} 
});

來源

2016-10-04 user1189352

閱讀有關angular ...'components'的指令或更新版本中的隔離範圍。應該是簡單的網絡搜索 – charlietfl

@charlietfl謝謝你現在看看 – user1189352

@charlietfl如果你把答案我會給你信用。我是谷歌搜索，但沒有提到..但你給我正確的條款搜索，我找到了答案，因爲它。 TY – user1189352

這是一個有點違反直覺，但在angularJS $範圍並不一定是孤立的。您可以在一個控制器中定義一個範圍變量，並從同一級別的其他控制器訪問它，就好像它是該控制器範圍的一部分一樣，並且可能既強大又危險。最簡單的解決方案是儘可能使用控制器變量和$ scope範圍內的語法，但有很多情況下$ scope是正確的選擇，通過練習，您將學會識別哪個是合適的。

如果您使用$ scope，則需要記住幾個實踐。第一個，也許是最重要的，是在語義上和具體上命名變量。如果您的相鄰範圍具有相似的功能或元素，則使用通用名稱會導致問題。我遇到了我的某個指令中出現錯誤的場景，因爲同一頁上的另一個指令意外地覆蓋了具有相同名稱的函數，因此它使用了錯誤的數據。更具體地說，你也更安全，每次使用這個變量時寫一些額外的字符是一個小小的代價，可以讓你安心和可讀的代碼。

另一種解決方案是使用isolated scopes（搜索：隔離指令範圍）。一個孤立的作用域的作用更接近你所期望的範圍，你在那個作用域級別定義的任何東西都不能在當前作用域及其子域之外訪問。但是，您必須小心所分離的範圍，因爲任何元素只能訪問單個隔離範圍。如果你有一起工作的屬性指令，給他們隔離的作用域會導致編譯錯誤。

一個隔離範圍添加到您的代碼，你只需把它定義爲對象的一部分，就像這樣：

app.directive('someDirective', function (SomeFactory1, SomeFactory2) { 

var controller = function ($scope) { 

    $scope.data; //Defined in all of my directives 

    function Initialize() { 
     $scope.data = { 
      stuff: '' 
     } 
    } 

    Initialize(); 

    $scope.takeInClick = function() { //Defined in all of my directives too 
     //Do Something 
    } 

}; 

return { 
    templateUrl: 'App_Data/Directives/Something/Something.html', 
    scope: {}, //Scope is now isolated! 
    controller: controller 
} 
});

您還可以添加變量通過在你的指令屬性被注入到你的範圍。

HTML

<my-directive lines="parentScopeVariable.lineCount"></my-directive>

'use strict'; 

angular 
    .module('myModule') 
    .directive('myDirective', 
    ['$rootScope', function ($rootScope) { 

    return { 
     restrict: 'E', 
     scope: 
     { 
     lines: '=lines' 
     }, 
     templateUrl: 'views/templates/my-directive.html', 
     link: function ($scope, element, attributes, controller) {}, 
     controller: function ($scope) 
     { 
     //Lines is equal to whatever value the variable outside 
     //the scope had, and uses two-way binding like you 
     //would expect 
     console.log ($scope.lines); 
     } 
    }]);

補充閱讀：Understanding Scope，Mastering the Scope of the Directives in AngularJS，任何數量的其他博客文章或文章，以這種效果的。

有很多這方面的資源。不要害怕繼續尋找，直到你找到一個真正引起你的學習風格的共鳴。就我而言，閱讀文檔就像是將我的頭撞在牆上，但是在閱讀我發現的隨機博客文章時，指令開始有意義，同時尋找不同問題的答案。

與指令

來源

2016-10-04 19:27:10

-2

嘗試手動注入範圍到控制器：

controller.$inject = ['$scope'];

來源

2016-10-04 19:11:30

使用controllerAs語法來避免範圍的問題，如您有以上：

 angular.module('your_module').directive('someDirective', someDirective); 

     function someDirective(){ 
        var directive = { 
        templateUrl: 'App_Data/Directives/Something/Something.html', 
        controller: ExampleController, 
        controllerAs: 'vm', 
        bindToController: true}; 

        return directive; 
        } 


     function ExampleController() { 
      var vm = this; 
      vm.data = ''; 
     }

這將有助於一噸與使它更容易外部範圍綁定到該指令的控制範圍

而且通過將bindToController設置爲true，它將幫助您將外部範圍綁定到指令的控制器的作用域

來源

2016-10-04 19:34:26 reh

$範圍是全球行事

回答

相關問題