はじめてお世話になります。
親コントローラを用いずに、$watchを使って、コントローラ間の値を受け渡す実験をしています。
html
1<!DOCTYPE html> 2<html lang="ja" ng-app="app"> 3<head> 4 <meta charset="utf-8" /> 5 <title>テスト</title> 6 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.js"></script> 7 <script> 8 var app = angular.module('app', []); 9 app.value('myValue', ''); 10 app.controller('InputController', ['$scope', 'myValue', function($scope, myValue){ 11 $scope.onInputChange = function(){ 12 myValue = $scope.myInput; 13 } 14 }]); 15 app.controller('OutputController', ['$scope', 'myValue', function($scope, myValue){ 16 $scope.$watch(function(){ 17 return myValue; 18 }, function(){ 19 $scope.myOutput = myValue; 20 }); 21 }]); 22 </script> 23</head> 24<body> 25 <div ng-controller="InputController"> 26 <input ng-model="myInput" ng-change="onInputChange()" type="text" /> 27 </div> 28 <div ng-controller="OutputController"> 29 {{ myOutput }} 30 </div> 31</body> 32</html> 33
Module#value経由で、InputControllerのプロパティの値をOutputControllerのプロパティに受け渡したいのですが、上記のように、Module#valueの値が生の文字列では、$watchのリスナーが発火せず、うまくいきませんでした。
そこで、scriptタグ間を下記のように書き換えて、
javascript
1var app = angular.module('app', []); 2app.value('myValue', {value: ''}); 3app.controller('InputController', ['$scope', 'myValue', function($scope, myValue){ 4 $scope.onInputChange = function(){ 5 myValue.value = $scope.myInput; 6 } 7}]); 8app.controller('OutputController', ['$scope', 'myValue', function($scope, myValue){ 9 $scope.$watch(function(){ 10 return myValue.value; 11 }, function(){ 12 $scope.myOutput = myValue.value; 13 }); 14}]);
Module#valueの値をオブジェクトにして、そのメンバを媒介にしてやるとうまくいきました。
やってることは一緒だと思うのですが、一体なぜこのようなことが起こるのでしょうか?
$watchの最初の引数である無名関数を、逐一検査しているわけではないのですか?
よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/02/15 05:01
2016/02/16 00:07