按钮无线电在另一个控制器中更改值,在角度js中按住ng键

时间:2015-05-11 17:34:21

标签: angularjs

我有两个控制器,一个控制器过滤器和一个显示控制器导致第一个我有一组单选按钮,当你更改单选按钮时,发送一个事件来改变第二个控制器中显示的值,代码是如下 : 我知道在第二个控制器中没有立即更改cament

HTML:

      <div ng-controller="MyCtrl1">
    <input type="radio" ng-model="value" value="evol1" ng-change="setSelectedEvol(value)" name="evol">
        <br>
         <input type="radio" ng-model="value" value="evol2" ng-change="setSelectedEvol(value)" name="evol">

        </div>

<div ng-controller="MyCtrl2">
on change button radio evol = {{displayEvol}}
</div>

角:

var myApp = angular.module('myApp',[]);

    function MyCtrl1 ($scope) {

     $scope.setSelectedEvol = function (value) {

               $scope.selectedEvol = value;
                switch ($scope.selectedEvol) {
                    case 'evol1':
                        $scope.evol = 'Evol. VA';
                     break;
                    case 'evol2':
                        $scope.evol = 'Evol. %';
                       break;

                }

            $rootScope.$broadcast('ctr1Data', $scope.evol);

    }

    function MyCtrl2 ($scope) {

     $scope.$on('ctr1Data', function (event, args) {
        $scope.displayEvol= args;

    });


    }

1 个答案:

答案 0 :(得分:3)

看到这个小提琴

http://jsfiddle.net/jigardafda/skyk3erh/

使用活动

HTML

<div ng-app="myapp">
    <div ng-controller="MyCtrl1">
        <input type="radio" ng-model="value" value="evol1" ng-change="setSelectedEvol(value)" name="evol"/>
        <br/>
        <input type="radio" ng-model="value" value="evol2" ng-change="setSelectedEvol(value)" name="evol"/>
    </div>
    <div ng-controller="MyCtrl2">
        on change button radio evol = {{displayEvol}} 
    </div>
 </div>

JS

var myApp = angular.module('myapp',[]);

myApp
    .controller('MyCtrl1', function ($scope, $rootScope) {
        $scope.setSelectedEvol = function (value) {

            $scope.selectedEvol = value;

            switch ($scope.selectedEvol) {
                case 'evol1':
                    $scope.evol = 'Evol. VA';
                    break;
                case 'evol2':
                    $scope.evol = 'Evol. %';
                    break;          
            }

            $rootScope.$broadcast('ctr1Data', $scope.evol);

        };
    })
    .controller('MyCtrl2', function ($scope, $rootScope) {
        $scope.displayEvol = '';

        $scope.$on('ctr1Data', function (event, args) {
            $scope.displayEvol= args;

        });

    });

使用$ parent

如果两个控制器并排,这将起作用。

http://jsfiddle.net/jigardafda/skyk3erh/2/

HTML

<div ng-app="myapp">
    <div ng-controller="MyCtrl1">
        <input type="radio" ng-model="value" value="evol1" ng-change="setSelectedEvol(value)" name="evol"/>
        <br/>
        <input type="radio" ng-model="value" value="evol2" ng-change="setSelectedEvol(value)" name="evol"/>
    </div>
    <div ng-controller="MyCtrl2">
        on change button radio evol = {{displayEvol}}
        <br/>
        {{balue}}
        <br/>
        {{$parent.balue}}
    </div>
 </div>

JS

var myApp = angular.module('myapp',[]);

myApp
    .controller('MyCtrl1', function ($scope, $rootScope) {
        $scope.setSelectedEvol = function (value) {

            $scope.selectedEvol = value;

            switch ($scope.selectedEvol) {
                case 'evol1':
                    $scope.evol = 'Evol. VA';
                    break;
                case 'evol2':
                    $scope.evol = 'Evol. %';
                    break;          
            }

            $rootScope.$broadcast('ctr1Data', $scope.evol);

            $scope.$parent.balue = $scope.evol;
        };
    })
    .controller('MyCtrl2', function ($scope, $rootScope) {
        $scope.displayEvol = '';

        $scope.$on('ctr1Data', function (event, args) {
            $scope.displayEvol= args;

        });

    });