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, почему данные в поле ввода и представлении view 2 сбрасываются?
Пожалуйста, помогите мне понять это поведение, спасибо.
1 ответ
Решение
Вы привязываете напрямую к примитивным типам (в вашем случае 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" />