Esta es mi situación en pseudocódigo

<div data-ng-controller="test">

    <div isolated-directive>
        <select ng-model="testControllerScopeVar">...</select>
    </div>

    <div ng-if="some condition that uses testControllerScopeVar"></div>

</div>

Esto funcionó perfectamente antes de agregar isolated-directive, ahora que se agregó (scope: true) el ng-if ya no funciona porque creo que se está comiendo dentro de la directiva.

¿Cuál es la forma más eficiente de hacer que esto funcione sin tocar la estructura del html y isolated-directive?

-1
Huangism 9 may. 2016 a las 20:55

3 respuestas

La mejor respuesta

Bueno, parece que una vez que conozco la solución, es tan simple

<div data-ng-controller="test as testCtrl">

    <div isolated-directive>
        <select ng-model="testCtrl.testControllerScopeVar">...</select>
    </div>

    <div ng-if="testCtrl.testControllerScopeVar == 'whatever'"></div>

</div>

ControllerAs me permite acceder específicamente al alcance correcto y funciona perfectamente, gracias a todos por su tiempo y aporte

1
Huangism 9 may. 2016 a las 18:54

Puede probar jQuery para obtener el valor y asignarlo a una nueva variable de alcance. Algo como esto

Html

<div ng-app="TestApp">
  <div data-ng-controller="test">
    <div isolated-directive>
      <input id="isolatedVar" ng-model="testControllerScopeVar" />
    </div>
    <div>
      {{isolatedVar}}
    </div>
  </div>
</div>

Js

   var app = angular.module('TestApp', []);
    app.controller('test', function($scope) {
      var element = angular.element(document.querySelector('#isolatedVar'));
      element.bind('keyup', function() {
        $scope.isolatedVar = element.val();
        console.log($scope.isolatedVar);
        $scope.$watch('isolatedVar', function() {});

      });

    });
    app.directive('isolatedDirective', function() {
      return {
        scope: true
      };
    });

Fiddle de trabajo https://jsfiddle.net/kavinio/yzb8ouzd/1/

0
Kavin Anbazhagan 9 may. 2016 a las 18:54

Un enfoque es asignar la variable del controlador a su alcance aislado y adjuntar la variable de alcance aislada a su ng-model interno.

Entonces su HTML se vería así:

<div data-ng-controller="test">

    <div isolated-directive="testControllerScopeVar">
        <select ng-model="isolatedScopeVar">...</select>
    </div>

    <div ng-if="some condition that uses testControllerScopeVar"></div>

</div>

Y su declaración de directiva se vería así:

app.directive('isolatedDirective', function () {
    return {
        scope: {
            isolatedScopeVar: '=isolatedDirective'
        }
    };
});
0
Jack A. 9 may. 2016 a las 18:02