javascript - ng-包括 : How can I maintain data in $scope after changing views?

Question

请检查这个 jsFiddle:

http://jsfiddle.net/mystikacid/b7hqcdfk/4/

模板:

<div ng-app="myApp">
<div ng-controller="dataCtrl">

    <div>Data : {{data}} (Value outside views)</div>
    <div ng-include src="view"></div>

    <script type="text/ng-template" id="view1">
        <p> View 1 </p>
        <p>Value inside view 1 : {{data}}</p>
        <input type = "text" ng-model = "data" /> 
        <button ng-click = 'changeView("view2")' > Go to view 2 </button>
    </script>

    <script type="text/ng-template" id="view2">
        <p> View 2 </p>
        <p>Value inside view 2 : {{data}}</p >
        <input type = "text" ng-model = "data" />  
        <button ng-click = 'changeView("view1")' > Go to view 1 </button>
    </script>

</div>
</div>

JavaScript:

var myApp = angular.module('myApp', []);

myApp.factory('myFactory', function () {

    var factory = {};
    factory.data = 'Default data';

    return factory;
});

myApp.controller('dataCtrl', function ($scope, myFactory) {

    $scope.view = 'view1';
    $scope.data = myFactory.data;


    $scope.changeView = function (view) {
        $scope.view = view;
    }
});

有两个问题:

1 。为什么输入文本时 View 外显示的数据没有变化？
2.如果我输入一些文本并转到 View 2，为什么输入框和 View 2 中的数据会重置？

请帮助我理解这种行为，谢谢。

Answer 1

您直接绑定(bind)到原始类型(在您的例子中是一个字符串)。这在 AngularJS 中效果不佳...检查此 answer ;

改用模型对象:

 myApp.factory('myFactory', function () {
     var factory = {};
     factory.model = {
         data: 'Default data'
     };

     return factory;
 });

 myApp.controller('dataCtrl', function ($scope, myFactory) {
     ...
     $scope.model = myFactory.model;
     ...
 });

关于观点:

<input type = "text" ng-model = "model.data" /> 

jsfiddle