Passare la variabile al modello direttiva senza creare un nuovo ambito

Question

C'è un modo per passare variabili utilizzando attributi a una direttiva senza creare un nuovo ambito?

HTML

<div ng-click='back()' button='go back'></div> 

JS

.directive('button', function() { 
    return { 
     scope: { 
      button: '@' 
     }, 
     template: "<div><div another-directive></div>{{button}}</div>", 
     replace: true 
    } 
}) 

Il problema è che il ng-click='back()' ora si riferisce al campo di applicazione della direttiva. Posso ancora fare ng-click='$parent.back()' ma non è quello che voglio.

Answer 1

Per impostazione predefinita, le direttive non creano un nuovo ambito. Se si vuole fare che esplicito, aggiungere scope: false alla direttiva:

<div ng-click='back()' button='go back!'></div> 

angular.module('myApp').directive("button", function() { 
    return { 
     scope: false, // this is the default, so you could remove this line 
     template: "<div><div another-directive></div>{{button}}</div>", 
     replace: true, 
     link: function (scope, element, attrs) { 
      scope.button = attrs.button; 
     } 
    }; 
}); 

fiddle

Dal momento che una nuova proprietà, button, viene creato sulla portata, si dovrebbe normalmente creare un nuovo ambito figlio usando scope: true come @ ardentum-c ha nella sua risposta. Il nuovo ambito sarà prototypially inherit dall'ambito principale, motivo per cui non è necessario inserire $parent.back() nel codice HTML.

Un altro bocconcino da ricordare: anche se stiamo usando replace: true, fare clic sull'elemento chiama ancora back(). Funziona perché "il processo di sostituzione migra tutti gli attributi/classi dal vecchio elemento a quello nuovo". - directive doc
Quindi ng-click='back()' button='go back!' vengono migrati al primo div nel modello della direttiva.

Answer 2

Immagino che dovresti usare la funzione compilare in questo caso.

angular.module('myApp').directive("button", function() { 
    return { 
     template: "<div><div another-directive></div>{{button}}</div>", 
     replace: true, 
     scope: true, 
     compile: function (tElement, tAttrs) { 
      // this is link function 
      return function (scope) { 
       scope.button = tAttrs.button; 
      };    
     } 
    }; 
}); 

Ecco jsfiddle example.