如何从共享工厂绑定数组或对象

How to bind an array or an object from a shared factory?

本文关键字：数组 对象 绑定 工厂 共享      更新时间：2023-09-26

我有一个名为Model的Angular工厂，它在多个控制器之间共享。基本上，这个Model封装了属性和助手方法。

我现在正试图将这个模型与我的视图绑定，但我有一个奇怪的行为，Model的嵌套对象和对象数组没有正确绑定。

我认为这个问题是由于我试图通过引用修改另一个对象中的一个对象。也许我丢失了嵌套元素的上下文？

我该如何解决这个问题？

这是我的应用程序：

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示例在输入字段中输入值时，Model不会随更改而更新。只有字段name更新

提前感谢

服务由Angular实例化，然后在需要的地方注入它们的引用。只需按照更改代码

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

工厂公开了一种新方法，使用该方法可以创建博客的新实例。

我认为这也是因为实现了JSON过滤器，所以您无法看到所有的值。因为描述、网站和url都在对象的原型中，所以它不会显示它

我添加了一个用于记录模型的按钮，您可以在控制台中看到值已更改

编辑2

Q：我不明白为什么JSON过滤器没有显示值

A： 我认为它可能是如何实现的，可能是让它变得更轻。否则，它必须通过整个原型链

Q：由于博客的性质，为什么将这些值放入proto

A： 这是因为你在博客的原型中添加了值，而不是在博客本身中。这就是javascript中原型继承的工作方式。优势在于，当你必须创建1000个博客实例时，要三思而后行。现在，每个实例都可以具有相同的方法和属性，或者为了使其更轻，每个实例可以共享其原型中的相同对象。（想想OO语言中的基类）阅读此以获得更清晰的

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

这里的博客是一个应该由工厂创建的服务。您的工厂应该返回新实例/a值/或函数。

你没有创建一个注入到你的控制器中的博客实例，注入的应该已经是所有将注入到其他人的东西的唯一实例。

因此，服务是单例的（由工厂创建）。

相关文章：