Question

我正在尝试在AngularJs中的两个不同控制器之间进行通信。我想要实现的目标是在第一个控制器中使用变量的值，一旦通过用户下拉而不是我设置的默认值来选择。但不幸的是，第二个控制器在第二个控制器中使用了变量的默认值。

我是Angular的新手，请原谅我，如果你认为它没有得到恰当的代表我来自数据科学背景。这是我正在使用的代码

List<Class3> listOf3 = 
    list.stream()
        .flatMap(List::stream) // convert a Stream<List<Class2>> to Stream<Class2>
        .map(Class2::getClass3) // convert a Stream<Class2> to Stream<Class3>
        .collect(Collectors.toList()); // collect to a List<Class3>

和Html看似如下

<script>

    var app = angular.module("BuildApp", []);
    app.run(function ($rootScope) {
        $rootScope.$on('scope.stored', function (event, data) {
            console.log("scope.stored", data);
        });
    });

    app.controller("BranchController", function ($scope, $http, Scopes) {
        Scopes.store('BranchController', $scope);
        $http.get('http://192.168.3.96:8082/engine-api/1.1/builds/getbranch').
        success(function (data, status, headers, config) {
            $scope.branchs = data;
        }).
        error(function (data, status, headers, config) {
            console.log('Api call failed', status)
        });

        $scope.selectedBranch = 'Nothing Selected';
        $scope.dropboxitemselectedbranch = function (item) {
            $scope.selectedBranch  = item;
        }
    });

    app.controller("KitController", function ($scope, $http, Scopes) {
        Scopes.store('KitController', $scope);
        var url = 'http://192.168.3.96:8082/engine-api/1.1/builds/getkit?Branch=' + Scopes.get("BranchController").selectedBranch;
        console.log(url)
        $http.get(url).
        success(function (data, status, headers, config) {
            $scope.kits = data;
        }).
        error(function (data, status, headers, config) {
            console.log('Api call failed', status)
        });
        $scope.selectedKit = "Nothing Selected";
        $scope.dropboxitemselectedkit = function (item) {
            $scope.selectedKit = item;
        }
    });

    app.factory('Scopes', function ($rootScope) {
        var mem = {};

        return {
            store: function (key, value) {
                mem[key] = value;
            },
            get: function (key) {
                return mem[key];
            }
        };
    });
</script>

Answer 1

使用controllerAs来避免错误。您应该创建第三个控制器，并将数据绑定到它或在组件架构中重写它。

<div ng-controller="Parent as parent">
   <div ng-controller="Child1 as c1">
        <button ng-click="parent.myData = c1.doInterestingMagic()" ></button>

   </div>
   <div ng-controller="Child2 as c2">
        <span ng-bind="parent.myData || c2.defaultMyData"></span>
   </div>

</div>

Answer 2

＆＃13;

var app = angular.module("myApp",[]);

//controllers declaration
app.controller('myCtrl1',function($scope, $rootScope){
    $scope.selectedOption = "option-1";
    $scope.change = function() {
      $rootScope.$emit('changeName',{selectedOption:$scope.selectedOption});
    }
});

app.controller('myCtrl2',function($scope, $rootScope){
    $scope.selectedOption = "option-2";
    $rootScope.$on('changeName', function(event,data) {
      $scope.selectedOption = data.selectedOption;
    })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp"> 

<span class="div1" ng-controller="myCtrl1"> 
    <select ng-model="selectedOption" ng-change="change()">
      <option value="option-1">Option 1</option> 
      <option value="option-2">Option 2</option>
      <option value="option-3">Option 3</option>
      <option value="option-4">Option 4</option>
      <option value="option-5">Option 5</option>
    </select>
</span> 

<span class="div2" ng-controller="myCtrl2"> 
    <select ng-model="selectedOption">
      <option value="option-1">Option 1</option> 
      <option value="option-2">Option 2</option>
      <option value="option-3">Option 3</option>
      <option value="option-4">Option 4</option>
      <option value="option-5">Option 5</option>
    </select>
</span> 
 
</body>

＆＃13;

如何在AngularJs中执行的控制器中的某个功能之后，从第一个控制器调用第二个控制器

2 个答案: