Question

我有一个指令＆＃34; avatar＆＃34 ;,这需要＆＃39;用户＆＃39;对象并显示用户的图像。

这很好用。

现在我有另一个指令＆＃39; user＆＃39;，它显示给定用户＆＃39;的名称。对象并包括其模板指令。

这是有效的..第一次。

当我更新＆＃39;用户＆＃39;对象，只有名称更改，图像（头像）不会更改。

我的问题：我怎样才能让它发挥作用？

Avatar指令：

（链接功能：如果用户对象确实具有＆＃39; ext＆＃39;属性，则会计算图像路径（＆＃39; src＆＃39;），否则会显示标准template.jpeg）

directive('avatarSmall', function() {

  return {
    restrict: "E",
    replace: true,
    templateUrl: "scripts/directives/avatar/small.html",
    link: function(scope, element, attrs) {
      var r = "images/avatars/";
      var ext = scope.user.ext;
      r += ext != undefined && ext.length >= 3 ? scope.user.ID + "." + ext : "template.jpeg";
      scope.src = r;
    },
    scope: {
      user: '='
    }
  }
})

头像模板：

<div class="circle-wrapper-small">
  <img class="circle-img-small"
       ng-src="{{src}}">
</div>

用户指令：

directive('user', function($compile) {
  return {
    restrict: "E",
    replace: true,
    templateUrl: "scripts/directives/user/template.html",
    scope: {
      user: '='
    }
  }
})

用户模板：

<div>
  <div class="media-left">
    <avatar-small user="user" />
  </div>
  <div class="media-body">
    <h4 class="media-heading">{{user.name}} {{user.surname}}</h4>
    </h5>
  </div>
</div>

Answer 1

因为你的avatar指令的代码只在指令init上执行。如果您想更新更改，则应$broadcast事件发送到您的指令并在$broadcast事件上执行该代码。

有关$emit，$broadcast和$on事件的详情，您可以查看以下帖子：Usage of $broadcast(), $emit() And $on() in AngularJS

这样的事情：

家长控制器

$scope.user = {
  // object properties
}

// watch "$scope.user" for changes
$scope.$watch('user', function(newVal, oldVal){
    if(newVal !== oldVal) {
      // send new "$scope.user" to your directive
      $scope.$broadcast('userObjChanged', $scope.user);
    }
}, true);

在指令

中

// catch event from parent's controller with new user object
$scope.$on('userObjChanged', function(event, data) {
  console.log(data); // here is the new user object from parent's scope
})

AngularJS 1.6：指令模板内的指令仅适用于

1 个答案: