1

我有这样的标记

<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 中没有任何反应。有什么想法吗？

4

1 回答 1

3

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

您需要手动启动摘要周期，因为您正在从事件（外部世界）更新范围。所以这将更新视图绑定。您可以使用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 运行另一个摘要周期，它将把新的摘要周期放在一个单独的队列中，直到第一次完成，然后它评估排队的摘要周期，一次运行摘要周期完成。

于 2016-03-07T15:25:14.647 回答