Angularjs 指令不会在服务模型更改时更新

我有一个包含我的应用程序模型的服务：

angular.module('adminClient').factory('myApi', function () {
    var model = {};
    model.myObject = {
        label: 'New York City'
    };

    return {
        model: function () {
            return model;
        }
    };
});

部分/控制器可以访问模型，并可以设置新的myObject：

angular.module('adminClient').controller('MySelectNetworkCtrl', function ($scope, myApi) {

    $scope.myObject = myApi.model().myObject;

});

angular.module('nav').directive('myTopBar', function(myApi) {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        templateUrl: 'nav/directive/my-top-bar/my-top-bar.html',
        link: function(scope, element, attrs, fn) {
            scope.myObject = myApi.model().myObject;
        }
    };
});

除此之外，我还有一个指令，它应该显示myObject中包含的标签：

angular.module('adminClient').controller('MySelectNetworkCtrl', function ($scope, myApi) {

    $scope.myObject = myApi.model().myObject;

});

angular.module('nav').directive('myTopBar', function(myApi) {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        templateUrl: 'nav/directive/my-top-bar/my-top-bar.html',
        link: function(scope, element, attrs, fn) {
            scope.myObject = myApi.model().myObject;
        }
    };
});

以下是HTML：

<div id="my-top-bar">
    <span ng-bind="myObject"></span>
</div>

当我运行应用程序时，标签显示良好（纽约市），但一旦控制器更改myObject，指令中的标签将保持不变。我也可以在Chrome Angular scope inspector中看到这一点

---

知道如何使指令显示当前值（即使在控制器更改后）吗？

这取决于控制器如何更新模型对象。因为你的代码

scope.myObject=myApi.model（）.myObject

获取此特定模型对象，只要更改模型对象
myObject
属性，它就可以正常工作

但是如果控制者这样做了

myApi.model（）.myObject={}//或任何新对象

现在服务返回的模型有不同的
myObject
，而指令模型则不同。因此，改变不起作用

相反，在指令中，请执行以下操作：

scope.myObject=myApi.model（）；//绑定到型号

并相应地更新指令模板中的绑定。查看它是否工作
检查此项

如果您希望在控制器内修改
myObject
，并且还希望此更改反映在
my top bar
指令中，该指令随后从
myApi
服务更新指令的范围，那么您应该这样做

在控制器中更新
myObject
，然后通过setter方法在服务中更新它

// Doing this will update your scope.myObject but 
// will not change the moObject in your service
$scope.myObject = {
  label: 'updated label'
};

// This will update your service, and anyone making a myApi.myApi.model() after this will get an updated myObject
myApi.setModel($scope.myObject);
// Notify directive of the change
$scope.$broadcast('updateDirective');

在工厂里：

angular.module('plunker').factory('myApi', function() {
  var model = {};
  model.myObject = {
    label: 'New York City'
  };

  return {
    model: function() {
      return model;
    },
    setModel: function(newModel) {
      model.myObject = newModel;
    }
  };
});

最后，该指令：

angular.module('plunker').directive('myTopBar', function(myApi) {
  return {
    restrict: 'E',
    replace: true,
    scope: {},
    templateUrl: 'top-bar.html',
    link: function(scope, element, attrs, fn) {
      console.log('in directive link', myApi.model().myObject);
      scope.myObject = myApi.model().myObject;
    },
    controller: function($scope) {
      $scope.$on('updateDirective', function() {
        console.log('updating the scope of directive so that ng-bind works');
        $scope.$apply(function() {
          $scope.myObject = myApi.model().myObject;
          console.log($scope.myObject);
        });
      });
    }
  };
});

使用指令中的作用域：{}定义创建新的隔离作用域时，请尝试将其删除。我尝试将作用域设置为true，但没有帮助。我知道，我需要一个独立的作用域，因为我正在使用包含所有数据的服务。我理解你的意思。然而，这也不起作用。我现在添加了$scope.$watch（'model.myObject'，function（newValue，oldValue）{$scope.$apply（）；}）；它可以工作，但现在它也显示了一个错误：[$rootScope:inprog]$digest已经在进行中。快把我逼疯了！我肯定与摘要周期有关，而不是更新模型，因为当我执行其他一些单击/操作时，值会在下一个摘要周期更新。不确定它为什么不更新服务中的模型。有什么想法吗？如果你的手表被炒了，你不需要做示波器。在里面应用美元。