angularjs - escape - Uso de ControllerAs con una directiva

ng-bind-html angularjs

Question

Estoy tratando de seguir la guía de estilo angularJS de John Papa here y he comenzado a cambiar mis directivas para usar controllerAs. Sin embargo, esto no está funcionando. Parece que mi plantilla no puede acceder a nada asignado a vm. Vea este ejemplo muy simple de plnkr que exhibe el comportamiento.

http://plnkr.co/edit/bVl1TcxlZLZ7oPCbk8sk?p=preview

angular
    .module(''app'', []);

angular
    .module(''app'')
    .directive(''test'', test);

function test() {
    return {
        restrict: ''E'',
        template: ''<button ng-click="click">{{text}}</button>'',
        controller: testCtrl,
        controllerAs: ''vm''
    }
}

angular
    .module(''app'')
    .controller(''testCtrl'', testCtrl);

function testCtrl() {
  var vm = this;
  vm.text = "TEST";
}

Answer 1

Con "controllerAs", el alias de instancia del controlador, vm , en su caso, se publica en el ámbito como la propiedad .vm del ámbito.

Por lo tanto, para acceder a sus propiedades (es decir, las propiedades del controlador), debe especificar {{vm.text}} o ng-click="vm.click" .

Answer 2

Cuando se utiliza la sintaxis de " controllerAs ", como se indicó anteriormente, el alcance está vinculado a la referencia " this " del controlador. Por lo tanto, nos permite introducir un nuevo espacio de nombres ( ''vm'' ) vinculado a nuestro controlador sin la necesidad de poner las propiedades del alcance en un objeto literal adicional (por ejemplo, $ alcance ). Así que acceder a cualquier cosa en el alcance del controlador, requiere espacio de nombres ''vm'' , como,

''<button ng-click="click">{{vm.text}}</button>''

Answer 3

Cuando usa la sintaxis de controllerAs , entonces tiene que usar

bindToController: true

Funcionará en su directiva.

Answer 4

Cuando utiliza la sintaxis de controllerAs, no accede al $ scope como lo haría normalmente, la variable vm se agrega al alcance, por lo que su botón debe convertirse en:

<button ng-click="click">{{vm.text}}</button>

Note el vm. añadido al principio del text .

Aquí hay un tenedor de tu Plunk con la corrección aplicada.

P: ¿Sabe cómo accedería a los atributos pasados ​​como atributos a la directiva, ejemplo "alcance: {texto: ''@''}"? ¿Entonces me veo forzado a usar $ scope en el controlador y configurar vm.text = $ scope.text?

R: En el artículo al que hace referencia, hay una sección y075 que habla solo de este escenario. Mira en bindToController :

return {
    restrict: ''E'',
    template: ''<button ng-click="click">{{text}}</button>'',
    controller: testCtrl,
    controllerAs: ''vm'',
    scope: {
        text: ''@''
    },
    bindToController: true // because the scope is isolated
};

Entonces deberías poder acceder a vm.text