我有一个名为 Model 的 Angular 工厂，它在多个 Controller 之间共享。
基本上这个 Model 封装了属性和辅助方法。
我现在尝试将此模型与我的 View 绑定(bind)，但我有一个奇怪的行为，Model 的嵌套对象和对象数组未正确绑定(bind)。
我认为这个问题是由于我试图通过引用修改另一个对象内的对象而引起的。也许我丢失了嵌套元素的上下文？
如何解决这个问题？
这是我的应用程序:
var app = angular.module('plunker', []);
app.factory('Blog', function() {
function Blog(id) {
this.load(id);
}
Blog.prototype = {
name: "",
description: [{
value: ""
}, {
value: ""
}, {
value: ""
}],
website: {
name: "",
url: ""
},
load: function(id) {
},
helper1: function() {
// implementation
},
helper2: function() {
// implementation
}
// many other helpers...
}
return Blog;
});
app.controller('MainCtrl', function($scope, Blog) {
$scope.model = new Blog(12);
});
最后是我的观点
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Name <input ng-model="model.name"></p>
<div ng-repeat="line in model.description">
Description line {{$index}} <input ng-model="line.value">
</div>
<p>Website name <input ng-model="model.website.name"></p>
<p>Website url <input ng-model="model.website.url"></p>
<p>Result : {{ model | json }}</p>
</body>
</html>
为了说明问题，我创建了一个 plunker example
在输入字段中输入值时，模型 不会随着更改而更新。仅更新字段name
提前致谢
最佳答案
服务由 Angular 实例化，然后在需要的地方注入(inject)它们的引用。 只需将代码更改如下
var app = angular.module('plunker', []);
app.factory('Blog', function() {
return {
name: "",
description: [
{value: ""},
{value: ""},
{value: ""}
],
website: {
name: "",
url: ""
},
helper1: function() {
// implementation
},
helper2: function() {
// implementation
}
// many other helpers...
}
//return new Blog();
});
app.controller('MainCtrl', function($scope, Blog) {
$scope.model = Blog;
});
服务、工厂和提供商的工作方式略有不同。我希望您清楚这一点，否则请阅读这篇优秀的文章
http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/
新的plunkr
http://plnkr.co/edit/FGOcPWVMeFDSyVtmv8Xd?p=preview
工厂公开了一种新方法，您可以使用它创建 Blog 的新实例。
我认为这也是因为 JSON 过滤器的实现，你无法看到所有的值。 因为描述、网站和 url 都在对象的原型(prototype)中，所以它不会显示它。
我添加了一个用于记录模型的按钮，您可以在控制台中看到值已更改
编辑2
问:我不明白为什么 JSON 过滤器不显示值？
A:我认为这可能是它的实现方式，可能是为了让它轻量化。否则它必须遍历整个原型(prototype)链
问:由于博客的性质，为什么将这些值放入proto中？
答:这是因为您在博客的原型(prototype)中添加了值，而不是在博客本身中添加了值。这就是 javascript 中原型(prototype)继承的工作原理。优点是当您必须创建数千个博客实例时。现在每个实例都可以具有相同的方法和属性，或者为了使其轻量级，每个实例可以共享其原型(prototype)中的相同对象。(想想 OO 语言中的基类) 阅读本文以获得更清晰的信息
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
关于javascript - 如何绑定(bind)共享工厂中的数组或对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25548793/