Question

这是我在伪代码中的情况

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

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

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

</div>

这在我添加isolated-directive之前完美无缺，现在它已被添加（scope: true）ng-if不再有效，因为我认为它在指令内部消失了。 / p>

在不触及html和isolated-directive结构的情况下，最有效的方法是什么？

Answer 1

好吧，一旦我知道解决方案，就这么简单了

<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允许我专门访问正确的范围并完美运行，感谢您的所有时间和输入

Answer 2

一种方法是将控制器变量映射到隔离范围，并将隔离范围变量附加到内部ng-model。

所以你的HTML看起来像这样：

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

你的指令声明如下：

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

Answer 3

您可以尝试使用jQuery获取值并将其分配给新的范围变量。像这样的东西

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

工作小提琴https://jsfiddle.net/kavinio/yzb8ouzd/1/

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

3 个答案: