Question

我是AngularJS的新手。我搜索了很多信息并找到一些适合我的好解决方案（ AngularJS communication between directives ）。第一个指令中的代码如下所示：

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

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

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>

AngularJS：指令和视图更新之间的通信

2 个答案: