Question

我一直在玩角度试图了解它如何管理范围，然后我发现我无法使用函数调用来更新指令中的变量。

为了说明问题，这是我的简单应用：我们的想法是，当您单击切换链接时，菜单应该显示，当您再次单击它或其他位置时，菜单应该会消失。

＆＃13;

angular.module('app', [])
  .controller('DemoController', ['$scope', function($scope) {

  }])
  .directive('dropdown', function() {
    return {
      restrict: 'E',
      transclude: true,
      controller: function($scope) {
        $scope.onBlur = function () {
          // this doesn't actually work
          $scope.showMenu = false;
        };
      },
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body id="body" ng-app="app" ng-controller="DemoController">
  <dropdown ng-transclude>
    <a href="#" ng-click="showMenu = !showMenu" ng-blur="onBlur()">Toggle</a>
    <menu ng-show="showMenu">
      <div>I'm</div>
      <div>the drop-down</div>
      <div>menu</div>
    </menu>
  </dropdown>
</body>

＆＃13;

这是我的选手链接：

非工作版本： http://plnkr.co/edit/rfdt5FEoGAOX15RZUsKA?p=preview

工作版本： http://plnkr.co/edit/xMANGDVa8n64OKK3gOgg?p=preview

工作版本之间的区别在于工作版本只使用ng-blur="showMenu = false"而不是调用函数。如果我在控制器功能中调用$scope.$apply()，那么我将获得＆＃34; $申请已经在进行中＆＃34;例外。

我想我必须在这里遗漏一些东西，但我现在还不知道为什么。提前谢谢。

Answer 1

关于$ scope的一件事。$ apply（）函数只有当$ scope。$$阶段为空时才可以调用它（确保它不在$ digest或$ apply阶段）

if (!$scope.$$phase) {
   $scope.$apply()
}

在你的第一个plunker中只改变了这个：

$scope.showMenu = false;
to 
this.showMenu = false;

它的功能和功能已经是$ scope bind。

控制器函数调用中的Angular-scope变量更新不会反映在指令html中

1 个答案: