javascript - AngularJS:指令和 View 更新之间的通信

Question

我是 AngularJS 的新手。我搜索了很多信息并找到了一些适合我的不错的解决方案( 奥 git _a )。第一个指令中的代码如下所示:

angular.module('app')
  .directive('myItem', function () {
    return {
      templateUrl: 'views/item.html',
      restrict: 'C',
      controller: function ($scope, $element) {
        $element.closest('.models-slider').on('afterChange', function(event, slick, currentSlide){
          $scope.$emit('model:updated', currentSlide);
        });
      }
 })

第二个:

angular.module('app')
  .directive('model', function () {
    return {
      templateUrl: 'views/model.html',
      restrict: 'E',
      controller: function ($scope, $element) {
       $scope.$on('model:updated', function(e, data){
         $scope.item = data;
         console.log('scope',  $scope); // Here I see right value of item
       });
     });
    }
 });

但问题出在 view/model.html 内部:

<div class="left-block">
  <a class="back" href="#"></a>
  <div class="model-wrapper">
    <div class="front-view active">
      <img src="images/model.png"/>
      <img ng-if="item.frontImage" ng-src="{{ item.frontImage }}"/>
    </div>
    <a class="rotate"></a>
  </div>
</div>

它不更新。我的代码有什么错误吗？如何更新我的 View ？

Answer 1

在 myItem 指令中的 scope.$apply 内发出“model:updated”，因为 afterChange 是非- Angular 事件