angularjs - directivas - ng-href angular 5

Atributos de alcance de directiva sin un alcance aislado en AngularJS

Question

¿Hay una forma de heredar el ámbito principal mientras se extiende con atributos pasados?

Quiero pasar parámetros a una directiva reutilizable directamente desde la plantilla sin tener que modificar el DOM en la función de enlace.

Por ejemplo:

<form-input icon="icon-email" label="email" ng-model="data.input"></form-input>

Para una directiva como esta:

    <div class="form-group">
      <label>{{label}}</label>
      <div class="input-group">
        <div class="{{icon}}">@</div>
        <input class="form-control" placeholder="Email" ng-model="mail.email">
      </div>
    </div>

ng-model está en el ámbito principal, controlando un formulario completo en este caso, pero no creo que sea necesario almacenar atributos de estilo en el controlador.

¿Hay una forma de pasar parámetros directamente en la plantilla sin crear un ámbito de aislamiento?

Answer 1

La respuesta de Angad funcionará para el enlace estático, pero si el valor del atributo puede cambiar después del enlace, esto no se actualizará. Si necesita esto, la solución sería pasar el valor como cadena en lugar de referencia:

<form-input icon="icon-email" label="{{email}}" ng-model="data.input"></form-input>

En la directiva, agregue un $ observe en el atributo para actualizar la variable de alcance:

$attributes.$observe(''label'', function(newValue){$scope.label=newValue});

Ahora la variable de alcance cambiará dinámicamente si cambia el valor del atributo.

Answer 2

No podría "extender" el alcance principal como tal. Sin embargo, su objetivo puede lograrse utilizando los atributos de etiqueta de directiva que se inyectan en la función de enlace de su directiva.

Así por ejemplo. para adjuntar su variable de label , la función de enlace de su directiva se vería a continuación:

 link: function ($scope, $element, $attributes) {
         $scope.label = $scope.$eval($attributes.label);
        }

Puedes echar un vistazo al buzón abajo para ver una demostración en vivo.
http://plnkr.co/edit/2qMgJSSlDyU6VwdUoYB7?p=preview