AngularJS：指令與視圖更新之間的通信

Question

我是AngularJS的新手。 我搜索了很多信息，找到了一些適合我的不錯的解決方案（ 指令之間的AngularJS通信 ）。 第一條指令中的代碼如下所示：

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>

它不會更新。 我的代碼中有任何錯誤嗎？ 如何更新我的看法？

Answer 1

因為afterChange是一個非角度事件，所以在myItem指令中在scope.$apply中發出' model:updated '

Answer 2

不過，您的問題不太清楚，我將嘗試為您提供一些答案或提示：

首先， $scope.$on不適用於您在不同范圍之間傳遞數據。 以及為什么要對myItem指令使用C的限制？ 您如何使用my-item和model這兩個指令？ 您認為它們在哪里？

您可以在指令和控制器（或另一個指令的控制器）之間建立雙向綁定 。 您需要在指令myItem創建一個隔離的范圍：

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

在model的指令模板中，您可以獲得項目

<my-item item="item"></my-item>