Question

所以我将我的UI拆分为子组件但后来我意识到其中一个组件需要对父控制器捕获的下拉列表更改作出反应。

我可以为变量创建一个共享服务，我已经能够注入子控制器，这样我就可以启动功能了。

我如何在子控制器中使用示波器？

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>

Answer 1

对于任何有兴趣的人来说，这是我如何解决这个问题。

我在两个控制器之间创建了一个共享服务。并在服务上创建了一个回调。我在ctrl2上注册了回调，所以当共享变量改变时，controller2将按照我想要的方式进行，并且范围更新。

<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>

Answer 2

如何将变量从一个控制器传递到其他

的一般示例

<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();
});

以下是解释此流程的博客：Frequently asked questions in angularjs

它有我写的东西的演示。快乐的编码.. !!

在页面上使用多个控制器的范围

2 个答案: