Как получить доступ к изолированной области «this» в угловой директиве?

Question

Если я использую $ сферы, эта директива работает отлично:

function alertBox(){ 
    return { 
    template: 
     '<div ng-show="alert" class="alert alert-{{alert.type}}" style="text-align: center;">\ 
     <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">x</a>\ 
     <span ng-bind-html="alert.message | safe_html"></span>\ 
     </div>' 
    } 
} 

Оповещение определяется в мой контроллер, как:

$scope.alert = {message: 'test!', type: 'danger'}; 

И мой простой вид:

<div alert-box></div> 

Однако, Я не использую $ scope, и вместо этого вызывается мое предупреждение с использованием этого «:»:

this.alert = {message: 'test!', type: 'danger'}; 

Но независимо от того, что я пытаюсь, я не могу понять, как ввести значение «this» в директиву.

В идеале я бы мог ссылаться на «self.alert» или что-то в этом роде, так что мне не нужно определять контекст видимости как атрибут, но, предполагая, что я это делаю, я пробовал варианты этого безрезультатно :

function alertBox(){ 
    return { 
     scope: { 
      scope: '=scope' 
     }, 
     template: '<div ng-show="' + scope + '.alert" class="alert alert-' + scope + '.type" style="text-align: center;"><a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">x</a>  <span ng-bind-html="' + scope + '.message | safe_html"></span></div>' 
    } 
} 

И мой HTML:

<div alert-box scope="welcome"></div> 

В этом примере я получил 'WelcomeController as welcome' определен.

Любая помощь приветствуется.

Answer 1

Несколько вопросов непонимания здесь.

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

В исходном примере директива использует родительскую область (с неявным scope: false) и не изолирует область действия (scope: {}).

Second, вы пытаетесь использовать подход «как контроллер» и определить свой объект alert как свойство экземпляра контроллера.Экземпляр контроллера (то, что вы называете this) затем публикуется в области под псевдонимом контроллера - welcome в вашем примере. Итак, вместо {{alert.message}} вам нужно будет использовать {{welcome.alert.message}}. Это все, что «контроллер как» делает - помещает «это» (т. Е. Объект экземпляра контроллера) как $scope.<alias>.

Итак, (и все еще), применяются те же принципы сферы действия, что и в моем первом пункте.

===

Для того, чтобы сделать свой пример работу, создать директиву с изолята сферами и связать объект alert посредством связывания атрибутов.

Вот канонический (хотя расточительно, смотри ниже) так, что, что это делается:

.directive("alertBox", function(){ 
    return { 
    scope: { 
     alert: "=" 
    }, 
    template: '<div ng-show="alert" class="alert-{{alert.type}}">{{alert.message}}</div>' 
    }; 
}) 

Использование:

<div ng-controller="WelcomeController as welcome"> 
    <div alert-box alert="welcome.alert"></div> 
</div> 

// in WelcomeController 
this.alert = {message: 'test!', type: 'danger'}; 

Шаблон директивы не влияет как переданный объект alert установлен в области видимости.

Bonus раздел

Итак, почему расточительно?

"=" сфера связывание создает двухстороннее связывание, который, вероятно, нет необходимости здесь, так как не ожидалось, что директива alertBox бы изменить alert объект на родителе. Двусторонняя привязка устанавливает 2 $ наблюдателей, одна из которых не используется и, следовательно, расточительна.

Вместо этого вы можете использовать одностороннюю привязку "&" к выражению. "&" дает функцию, которая должна вызываться для получения объекта, возвращаемого связанного выражения (а не объекта непосредственно как с "="), поэтому шаблон дИРЕКТИВЫ слегка меняется:

scope: { 
    alert: "&", 
}, 
template: '<div ng-show="alert()" class="alert-{{alert().type}}">{{alert().message}}</div>' 

Answer 2

bindToController: Вы можете использовать bindToController свойство, когда установлено верно в директиве с объемом изоляции, свойства компонентов связаны с controller, а не scope, что делает его доступным на this.

Как правило, вы используете что-то подобное при использовании синтаксиса controller as.

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

myapp.controller('MainCtrl', function() { 
    this.name = "Vinoth Babu"; 
}); 

myapp.directive('alertBox', function(){  
    return { 
     controller: 'MainCtrl', 
     controllerAs: 'ctrl', 
     bindToController: true, 
     template: '<div>{{ctrl.name}}</div>' 
    };  
}); 

HTML Отрывок:

<div ng-app="myapp"> 
    <div ng-controller="MainCtrl as ctrl"> 
     <div alert-box></div> 
    </div> 
</div> 

рабочая скрипку: http://jsfiddle.net/SNF9x/136/

Пожалуйста, дайте мне, если у вас есть что-то еще в своем уме.