如何從共享工廠綁定數組或對象？

我有一個叫做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="[email protected]" 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 當進入輸入字段中的值，該Model是未更新更改。只有場name更新提前

感謝

來源

2014-08-28 Michael

服務由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過濾器被實現，你無法看到所有的值。由於描述和網站和網址是在對象的原型，它不顯示它。

我增加了一個按鈕，用於記錄該模型，您可以在值改變

編輯2

Q上的控制檯中看到的：我不明白爲什麼JSON過濾器不顯示值？

答：我認爲這可能是如何實施的，可能是爲了讓它輕便。否則，它具有通過它的整個原型鏈走路

問：爲什麼值放入原，因爲博客的本質是什麼？

答：它是因爲您在Blog的原型中添加了值，而不是在Blog本身中。這是原型繼承在JavaScript中的工作原理。當你不得不創建1000個博客的實例時，這樣做的好處在於思考。現在，每個實例都可以有相同的方法和屬性或使其重量輕，每個實例可以共享同一個對象，它是在其原。（想在面向對象的語言基礎類的）閱讀更加清晰

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

來源

2014-08-28 12:54:37 Anand

謝謝@anand，這是工作，那麼構造函數呢？ '函數Blog（）{}'我忘了提及，我的應用程序我通過一些參數，當我做'新' – Michael 2014-08-28 12:59:45

嘿看看我的編輯 – Anand 2014-08-28 13:19:50

再次感謝@anand，這個答案是最好的。最後的評論，我不明白爲什麼JSON過濾器不顯示值？由於「博客」的性質，爲什麼值被放入'__proto__'？再次感謝:) – Michael 2014-08-28 13:31:29

博客這裏是應該由工廠創建的服務。你的工廠應該返回新的實例/值/函數。

您不會創建注入您的控制器的Blog實例，注入的內容應該已經是唯一可用於注入其他任何內容的實例。

因此，服務是單件（由工廠創建）。

來源

2014-08-28 12:31:48

正是我要說的:) – XGreen 2014-08-28 12:32:38

如何從共享工廠綁定數組或對象？

回答

相關問題