blocks|key|2372716|text|这完全取决于控制器如何更新模型对象。由于您的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2372717|scope.myObject+=+myApi.model().myObject;|offset|length|style|CODE|2372718|获取这个特定的模型对象，只要更改了模型对象的myObject属性，它就能正常工作。|2372719|但如果控制器这样做|2372720|myApi.model().myObject=+{};++//or+any+new+object|2372721|现在，服务返回的模型具有不同的myObject，指令模型也不同。因此，更改不起作用。|2372722|相反，在do指令中：|2372723|scope.myObject+=+myApi.model();++//+bind+to+model|2372724|并相应地更新指令模板中的绑定。看看它是否起作用|2372725|entityMap^0|0|0|14|0|M|8|0|0|0|1C|0|F|8|0|0|0|1D|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|N|3|O|5|6|7|18|8|@$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1B|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1C|8|@$D|1D|E|1E|F|G]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1F|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|W|$]]

It all depends upon how the controller is updating the model object. Since your code

<code>scope.myObject = myApi.model().myObject;</code>

gets hold of this specific model object it works fine as long as model object <code>myObject</code> properties are changed.

But if the controller does 

<code>myApi.model().myObject= {}; //or any new object</code>

Now the model returned by service has different <code>myObject</code> and the directive one is different. Therefore changes do not work. 

Instead in directive do:

<code>scope.myObject = myApi.model(); // bind to model</code>

And update the bindings in the directive template accordingly. See if it works

blocks|key|2372732|text|检查此plunkr|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2372733|如果您希望修改控制器中的myObject，并且希望此更改反映在您的my-top-bar指令中，该指令随后从myApi服务更新指令的作用域，那么您应该这样做。|style|CODE|2372734|更新控制器中的myObject，然后还通过setter方法在服务中更新它。|2372735|//+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');|code-block|syntax|javascript|2372736|在工厂里：|2372737|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;
++++}
++};
});|2372738|最后，指令：|2372739|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);
++++++++});
++++++});
++++}
++};
});|2372740|entityMap|0|LINK|mutability|MUTABLE|url|https://plnkr.co/edit/BVDPSh6vxGWFlm97MyW0?p=preview^0|3|6|0|0|C|8|X|A|1H|5|0|7|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@$A|19|B|1A|F|G]|$A|1B|B|1C|F|G]|$A|1D|B|1E|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1F|8|@$A|1G|B|1H|F|G]]|9|@]|C|$]]|$1|J|3|K|5|L|7|1I|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1J|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1K|8|@]|9|@]|C|$M|N]]|$1|S|3|T|5|6|7|1L|8|@]|9|@]|C|$]]|$1|U|3|V|5|L|7|1M|8|@]|9|@]|C|$M|N]]|$1|W|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]]]

Check this <a href="https://plnkr.co/edit/BVDPSh6vxGWFlm97MyW0?p=preview" rel="nofollow">plunkr</a>

If you want to modify your <code>myObject</code> inside your controller, and also want this change to be reflected inside your <code>my-top-bar</code> directive which then updates the directive's scope from <code>myApi</code> service, then you should do it like this.

Update the <code>myObject</code> in your controller and then also update it in your service through a setter method.

<pre><code>// 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');
</code></pre>

And in the factory:

<pre><code>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;
 }
 };
});
</code></pre>

Finally, the directive:

<pre><code>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);
 });
 });
 }
 };
});
</code></pre>

I have a service that contains my application's model:

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

 return {
 model: function () {
 return model;
 }
 };
});
</code></pre>

A partial/controller has access to the model and can set a new myObject:

<pre><code>angular.module('adminClient').controller('MySelectNetworkCtrl', function ($scope, myApi) {

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

});
</code></pre>

In addition to this, I have a directive that should display the label contained in myObject:

<pre><code>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;
 }
 };
});
</code></pre>

And here is the HTML:

<pre><code>&lt;div id="my-top-bar"&gt;
 &lt;span ng-bind="myObject"&gt;&lt;/span&gt;
&lt;/div&gt;
</code></pre>

When I run the application, the label is displayed fine (New York City), but as soon as the controller changes the myObject, the label in the directive remains unchanged. I can also see this in the Chrome Angular scope inspector.

Any idea how I can make the directive display the current value even after changed by the controller?

Directive does not update on service model change

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个包含应用程序模型的服务：angular.module('adminClient').factory('myApi', function () {    var model = {};    model.myObject = {        label: 'New York City'    };    ret...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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