角度指令控制器和链接

Question

我有这样的标记

<i class="fa-font icon-user" wd-user-profile></i>

显示/隐藏这个 div

<div id="user-profile" ng-show="vm.isVisible">
  <h3>user name</h3>
  <h3>user email</h3>
  <pre>{{vm | json:3}}</pre><!-- not updating on click -->
</div>

和这样的指令代码

angular
  .module('myApp')
  .directive('wdUserProfile', wdUserProfile);

function wdUserProfile() {
  var ddo = {
    restrict: 'A',
    templateUrl: 'app/components/_shared/_userProfile.html',
    controller: UserProfileController,
    controllerAs: 'vm',
    bindToController: true,
    link: function(scope, elem, attr, ctrl) {
      elem.bind('click', scope.vm.onIconClick);
      //elem.bind('click', ctrl.onIconClick); also doesn't work
    }
  };

  return ddo;
}

function UserProfileController() {
  var vm = this;

  vm.onIconClick = function() {
    vm.isVisible = !vm.isVisible;
    console.log(vm.isVisible);
  };
}

问题在于，尽管事件触发并且 vm.isVisible 变化良好，但在视图 div 中没有任何反应。有什么想法吗？

Answer 1

任何在角度上下文之外运行的东西都不会让角度摘要系统运行摘要循环以更新绑定。

您需要手动启动摘要周期，因为您正在从事件（外部世界）更新范围。所以这将更新视图绑定。您可以使用scope.$apply()/$timeout 来运行摘要循环。

elem.bind('click', function(){
    //don't forget to inject $timeout depenency.
    $timeout(scope.vm.onIconClick); //$timeout will run code in next digest
}));

可能会出现两个摘要循环发生冲突的情况。简直不能同时运行两个摘要循环。 $timeout 在这里所做的是，如果假设一个摘要周期正在运行，并且您尝试使用 $timeout 运行另一个摘要周期，它将把新的摘要周期放在一个单独的队列中，直到第一次完成，然后它评估排队的摘要周期，一次运行摘要循环已完成。