Угловые направляющие контроллеры и звенья

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, он помещает новый цикл дайджеста в отдельную очередь до первого завершения, а затем оценивает цикл дайджеста в очереди, как только все цикл дайджеста завершен.