如何在隔离范围指令中访问此范围变量？

Question

This is my situation in psuedo code

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

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

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

</div>

This worked perfectly before I added isolated-directive , now that it is added ( scope: true ) the ng-if no longer works because I think it is getting eat up inside of the directive.

What is the most efficient way to get this working without touching the structure of the html and isolated-directive ?

Answer 1

Well it seems once I know the solution, it is so 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 allows me to specifically access the right scope and works perfectly, thanks all for your time and input

Answer 2

One approach is to map the controller variable into your isolated scope and attach the isolated scope variable to your internal ng-model .

So your HTML would look like this:

<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>

And your directive declaration would look like this:

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

Answer 3

You can try jQuery to get the value and assign it to a new scope variable. Something like this

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
      };
    });

Working fiddle https://jsfiddle.net/kavinio/yzb8ouzd/1/