だから、私は自分のUIをサブコンポーネントに分割しましたが、コンポーネントの1つが親コントローラによって捕捉されたドロップダウン変更に反応する必要があることを認識しています。
私は変数のための共有サービスを作成することができますし、私は機能をキックオフできるようにサブコントローラを注入することができました。
どのように私はサブコントローラ内のスコープを使用するのですか？
var ctrl1= $scope.$new();
$controller("ctrl", { $scope: ctrl1});
ctrl1.GetData();
これはうまく動作します。私は、コンソールにデータが戻ってくるのを見ることができます。しかし私のUIは変わらない。私は何が欠けていますか？
私は、もっと明確にしようとしていることを説明するために投稿を編集しました。
変更のドロップダウンは親コントローラによってキャッチされますが、子コントローラが逃げてデータを取得してUIを更新する必要があります。
これはコンポーネントを分割する試みです。これは可能ですか、コンポーネントを分割し過ぎてしまっていますか？
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script>
angular.module("app2", [])
.controller("ctrl2", ["$scope", "$http", function($scope, $http){
$scope.getdata = function(){
$http.post(WebServiceURL)
.success(function(data){
$scope.app2Data = "test2 data";
});
}
}]);
angular.module("app1", ["app2"])
.controller("ctrl1", ["$scope","$controller",function($scope, $controller){
$scope.name = "Controller 1";
//just something to put in the ddp
$scope.data = [
{id:1, name: "test"},
{id:2, name: "test2"}
]
$scope.makeChanged = function(id){
//ddp has changed so i refresh the ui with some other data which is in got by ctrl2.
var cl2 = $scope.$new();
$controller("ctrl2", { $scope: cl2 });
cl2.getdata();
}
}]);
</script>
</head>
<body ng-app="app1">
<div ng-controller="ctrl1">
<p>here is: {{name}}</p>
<select ng-model="d" ng-options="d as dat.name for dat in data track by dat.id" ng-change="makeChanged(d.id)"></select>
<div>
{{app2Data.text}}
</div>
</div>
</body>
</html>回答：
回答№1は1ここに興味を持っている人のために私はどのようにこのラウンドを持っています。
私は2人の間で共有サービスを作りましたコントローラ。サービス上でコールバックを作成しました。私はコールバックをctrl2に登録しました。共有変数が変更されたときに、コントローラ2は私が望むことを行い、スコープがフレッシュになります。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script>
angular.module("app1", ["app2"])
.controller("ctrl1", ["$scope", "$controller", "appointmentSharedProperties",
function($scope, appointmentSharedProperties) {
$scope.name1 = "Controller 1";
console.log("ctrl1");
//just something to put in the ddp
$scope.data = [{
id: 1,
name: "test"
}, {
id: 2,
name: "test2"
}];
$scope.makeChanged = function(value) {
//ddp has changed so i refresh the ui with some other data which is in got by ctrl2.
appointmentSharedProperties.setDetail(value);
console.log("in makeChanged: " + value);
}
}
]).service("appointmentSharedProperties", function() {
var test = "";
var __callback = [];
return {
getDetail: function() {
return test;
},
setDetail: function(value) {
test = value;
if (__callback.length > 0) {
angular.forEach(__callback, function(callback) {
callback();
});
}
},
setCallback: function(callback) {
__callback.push(callback);
}
};
});
angular.module("app2", [])
.controller("ctrl2", ["$scope", "appointmentSharedProperties",
function($scope, appointmentSharedProperties) {
$scope.name2 = "Controller 2";
console.log("ctrl2");
var getdata = function() {
console.log("in getdata");
$scope.app2Data = appointmentSharedProperties.getDetail();
}
appointmentSharedProperties.setCallback(getdata);
}
]);
</script>
</head>
<body ng-app="app1">
<div ng-controller="ctrl1">
<p>here is: {{name1}}</p>
<p>here is: {{name2}}</p>
<select ng-model="d" ng-options="d as dat.name for dat in data track by dat.id" ng-change="makeChanged(d.name)"></select>
<div>
{{app2Data}}
</div>
</div>
</body>
</html>回答№2の場合は0
あるコントローラから他のコントローラに変数を渡す一般的な例
<html>
<head>
<meta charset="ISO-8859-1">
<title>Basic Controller</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="ctrl1">
{{greeting}}
</div>
<div ng-controller="ctrl2">
{{dataToHtml2}}
</div>
</body>
</html>
これはこれのjavascriptファイルです
var myApp = angular.module("myApp",[]);
myApp.service("sampleService", function(){
var temp = "";
this.setValue = function(data){
temp = data;
}
this.getValue = function(){
return temp;
}
});
myApp.controller("ctrl1", function($scope,sampleService) {
$scope.greeting = "This line is in first controller but I exist in both";
var data= $scope.greeting;
sampleService.setValue(data);
});
myApp.controller("ctrl2", function($scope, sampleService){
$scope.dataToHtml2 =sampleService.getValue();
});
この流れを説明するブログは次のとおりです： angularjsでよくある質問
それは私が書いたもののデモを持っています。ハッピーコーディング.. !!