Почему я должен использовать изолированные директивы scope в AngularJS?

Question

Мне интересно, почему я должен использовать изолированные директивы scope? Я всегда могу получить некоторые данные с сервисом внутри моего контроллера, и эти данные будут доступны внутри директивы, которые не имеют изолированной области видимости, если я хочу использовать эту директиву в другом месте, я могу просто отправить запрос и получить данные ... . Правильно?

При создании директивы с изолированной областью видимости, вы должны получить данные и передать его в директиве ..

Что такое преимущество использования изолированных директив области видимости?

Почему я должен использовать его и когда? *

Answer 1

Потому что это делает вашу директиву собственный модуль (дизайн-мудрый, я не говорю о angular.module s ;-) с четким Defined автономный интерфейс , что означает, что он может использоваться повторно в любом контексте. Это также делает его код читаемым, так как все, с чем работает директива, находится в коде директив, а не в какой-либо магической родительской области, на которую он опирается. Давайте посмотрим на пример без изолированный объем:

Контроллер:

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-переменные в одну глобальную область, чтобы они были легко доступны извне: возможность повторного использования, удобочитаемость, ремонтопригодность - это то, что вы получаете посредством модуляции и encapsulating ваш код , перейдя на low coupling and high cohesion после black-box-principle.

Answer 2

Директива с изолированной областью в основном используется, когда вы хотите создать компонент, который может быть повторно использован во всем приложении, чтобы вы могли использовать его в любом месте вашего углового модуля.

Изолированный объект означает, что вы создаете новую область действия, которая не была бы прототипически унаследована от родительской области. Но вы можете передать значения в директиву, которую вы хотите потребовать от родительской области. Они могут проходить в различной форме через значение атрибута, есть опция, которую вы можете использовать scope: {}, чтобы сделать директиву изолированной областью.

1. @ - Средства значения интерполяции, как {{somevalue}}
2. = - Значит два способа связывания с переменной родительской области, указанной в атрибуте {{somevalue}}
3. & - означает, что вы можете передать ссылку метод в директиву, которая может быть звонок от Директива

Изолированный объем, созданный с помощью $scope.$new(true); где $scope - текущая область применения e размещается указатель директивы.

Как вы говорите, вы собираетесь хранить данные в Сервисе, а не изолировать область. Но этот подход никогда не будет работать для вас, поскольку сервис - это одноэлементная вещь, которая имеет только один экземпляр. Если вы хотите использовать свою директиву несколько раз, вам нужно сделать другую переменную в сервисе, которая потребует данных, необходимых для другого элемента. Если это число указателей увеличилось до 10, подумайте, как будет выглядеть ваш сервис, который будет выглядеть очень жалким.

Используя изолированный объем, код будет выглядеть более модульным, улучшится возможность повторного использования кода. Отдельные переменные области видимости никогда не конфликтуют с другими переменными, которые имеют одно и то же имя в родительской области.