ng-include: как я могу сохранить данные в $scope после изменения представлений?

Пожалуйста, проверьте этот 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 . Почему данные, отображаемые вне представлений, не меняются при вводе текста?
2 . Если я ввожу текст и перехожу к представлению 2, почему данные в поле ввода и представлении 2 сбрасываются?

Пожалуйста, помогите мне понять это поведение, спасибо.


javascript angularjs angularjs-ng-include
person vivekanon    schedule 18.08.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы привязываетесь непосредственно к примитивным типам (в вашем случае String). Это не работает в AngularJS... проверьте этот ответ;

Вместо этого используйте объект модели:

 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

person bmleite    schedule 18.08.2014