爲什麼我應該在AngularJS中使用獨立的範圍指令？

我想知道爲什麼我應該使用隔離範圍指令？我總是可以在控制器中獲得一些帶有服務的數據，這些數據在指令中可用，但沒有隔離範圍，如果我想在其他地方使用該指令，我可以發送請求並獲取數據... 。對？爲什麼我應該在AngularJS中使用獨立的範圍指令？

當您創建隔離範圍的指令，必須獲取數據，並通過它來指導..

什麼是使用隔離範圍指令的優勢在哪裏？

我爲什麼要使用它，什麼時候？*

來源

2015-06-17 Vesko Vujovic

因爲它使你的指令一個自己的模塊（設計的角度來看，我不是在談論angular.module小號;-)有明確定義的自包含的接口，這意味着它可以在任何情況下重用。它也使得它的代碼可讀，因爲指令處理的所有內容都在指令代碼中，而不是它依賴的某個神奇的父代作用域中。讓我們來看一個例子沒有一個孤立的範圍：

控制器：

angular.module("carShop",[]) 
.controller("CarStorefrontController",function(){ 
    //For simplicity 
    this.cars = [ 
     { name: 'BMW X6', color: 'white' }, 
     { name: 'Audi A6', color: 'black' } 
    ]; 
});

指令：

angular.module("carShop") 
.directive("carList",function(){ 
    return { 
     template: ['<ul>', 
         '<li ng-repeat="car in vm.cars">', 
         'A {{car.name}} in shiny-{{car.color}}', 
         '</li>', 
        '</ul>'].join("") 
    }; 
});

頁：

<div ng-app="carShop" ng-controller="CarStorefrontController as vm"> 
    <h2>Welcome to AwesomeCarShop Ltd. !</h2> 
    <p>Have a look at our currently offered cars:</p> 
    <car-list></car-list> 
</div>

這工作，但不可重複使用。如果我想在我的應用程序的其他位置顯示汽車列表，我需要將我的控制器重命名爲vm，並讓它有一個名爲cars的字段，其中包含我的汽車陣列以便它能夠正常工作。但是，如果我改變我的指令來

angular.module("carShop") 
.directive("carList",function(){ 
    return { 
     scope: { cars: '=' }, 
     template: [ /* same as above */ ].join("") 
    }; 
});

和我的店面網頁上更改<car-list></car-list>到<car-list cars="vm.cars"></car-list>"，我可以處處剛好路過汽車的任何陣列無需關心如該陣列是從哪裏來的重用該指令。另外，我現在可以用一個完全不同的替代我的店面頁面上的控制器，而不必更改我的指令定義（並且不更改所有其他地方，我使用汽車列表）。

這真的可以歸結爲什麼你不應該把所有的JavaScript變量放到一個全局範圍內，以便他們可以從任何地方輕鬆訪問：可重用性，可讀性，可維護性 - 這就是你通過模塊化獲得的代碼和你的代碼，通過low coupling and high cohesion繼black-box-principle之後。

來源

2015-06-17 10:46:21 LionC

此外，有點相同的解釋和更多關於孤立範圍在這裏：http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/很好的答案！ – tbutcaru

請將我的問題標記爲有用 –

@VeskoVujovic如果您更清楚一點，請添加一些**簡短代碼示例並提供[引用]（https://docs.angularjs.org/guide/directive#isolating-一個指令的範圍）我很樂意這樣做:-) – LionC

使用隔離作用域的指令基本上用於創建可在整個應用程序中重複使用的組件，以便您可以在角度模塊上的任何位置使用它。

隔離範圍意味着您正在創建一個新的範圍，該範圍不會從原始範圍原型繼承。但是您可以將值傳遞給您想要從父範圍請求的指令。它們可以通過屬性值以各種形式傳遞，還有可以使用scope: {}作爲隔離範圍的選項。

@ - 均值等{{somevalue}}
=插補值 - 是指兩種方式與屬性{{somevalue}}
&提到父範圍可變結合 - 意味着你可以傳遞方法參照指令，該指令可以是從呼叫指令

使用$scope.$new(true);創建的隔離範圍其中$scope是當前範圍e指令標籤被放置。

正如你所說，你要將數據存儲在服務中，而不是作爲一個獨立的範圍。但這種方法永遠不會爲你工作，因爲服務是單一事物，只有一個實例。如果你想多次使用你的指令，那麼你需要創建另一個服務變量來獲取其他元素所需的數據。如果該指令計數增加到10，那麼考慮你的服務將如何，看起來會非常可悲。

通過使用隔離範圍，代碼看起來更模塊化，代碼的重用性將得到改善。獨立的範圍變量永遠不會與父範圍中具有相同名稱的其他變量發生衝突。

來源

2015-06-17 11:04:48

爲什麼我應該在AngularJS中使用獨立的範圍指令？

回答

相關問題