Impossibile accedere nell'ambito del controllore dalla direttiva

Question

Questa è la mia app config:

angular.module('myApp', ['myApp.directives', 'myApp.controllers', 'myApp.services']); 

Questo è il mio controller:

angular.module('myApp.controllers', []) 
    .controller('MainCtrl', function ($scope) { 
     $scope.name = 'world'; 
    }); 

Questa è la mia direttiva:

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

directives.directive("hello", function() { 
    return function (scope, elm, attrs) { 
     elm.text("hello, " + scope[attrs.name]); 
    }; 
}); 

e questo è il mio html:

<div ng-controller="MainCtrl"> 
    <h1 hello></h1> 
</div> 

Il è problema è che angolare rende la direttiva come:

ciao, non definito

Invece di:

ciao, mondo

Cosa c'è di sbagliato ?

Answer 1

Si accede scope[attrs.name] ma la direttiva non fornisce un valore per l'attributo name

ci sono 2 opzioni:

1. cambiare la direttiva per elm.text("hello, " + scope['name']); Questo non è un modo preferito come codici rigidi per un nome proprietà di ambito

2. Modificare il codice HTML in <h1 hello name="name"></h1>. Questo è meglio, ma sento che utilizza un attributo ridondante

vorrei suggerire di cambiare la direttiva per elm.text("hello, " + scope[attrs['hello']]);

O ancora meglio elm.text("hello, " + scope.$eval(attrs['hello']));

questo modo si ottiene il vantaggio di espressioni come pure (es: <h1 hello="name|uppercase"></h1>) demo

in questo modo il codice HTML sarebbe <h1 hello="name"></h1>

Riguardo al parametro attrs: non è altro che una mappa di stringhe tratte dagli attributi presenti sull'elemento dom.

Answer 2

È possibile accedere utilizzando scope. Guarda http://jsfiddle.net/rPUM5/

directives.directive("hello", function() { 
    return function (scope, elm, attrs) { 
     elm.text("hello, " + scope.name); 
    }; 
});​ 

Answer 3

Si può fare qualcosa che, al momento di scrivere questo, sembra essere senza documenti in angolare (vedi il commento di Mark Rajcok qui: http://docs.angularjs.org/api/ng.$rootScope.Scope).

Dall'interno direttiva:

scope.$parent.name 

Se fate una console.log(scope) su scope (dall'interno della direttiva), vedrete queste proprietà della direttiva.

Tutto ciò detto, non so se questa è una convenzione angolare "corretta", poiché non è documentata e non ho trovato altra documentazione migliore su come accedere al controller all'interno di una direttiva.

Answer 4

ho trovato un altro caso:

se si accede a una variabile proveniente da un corpo richiesta Ajax, allora dovete aspettare fino a quando la variabile è impostata.

es:

# in controller 
$http.get('/preview').then((response) -> 
    $scope.tabs = response.data.tabs 
    $scope.master_switch = '1' 
    console.info 'after get response in controller' 
) 

# in directive 
directive('masterSwitch', -> 
    (scope, element, attrs) -> 
    alert 'in directive!' # will show before "after get response in controller" 
    console.info scope.master_switch # is undefined 
    setTimeout(-> console.info(scope.master_switch), 50) # => 1