Ich habe eine AngularJS-Anwendung, in der ich zwei Controller habe. Ich muss das ng-Modell des Eingangsfelds des ersten Controllers durch Klicken auf eine Schaltfläche im zweiten Controller einstellen oder aktualisieren. Da auf $ scope des 1. Controllers vom 2. Controller aus nicht zugegriffen werden kann, kann dies mit $ scope erfolgen. Ich habe versucht, $ rootScope zu verwenden. Hier ist Beispielgeige.

var myApp = angular.module('myApp',[]);
function MyCtrl1($scope, $rootScope) {
    $rootScope.name = 'anonymous'; 
}

function MyCtrl2($scope, $rootScope) {
 $scope.myclick = function()
 {
    $rootScope.name = "myname";
 }
}

HTML Quelltext

<div ng-controller="MyCtrl1">
  <input type="text" ng-model="name" ng-change="ontxtchange(name)"></input>
</div>
<div ng-controller="MyCtrl2">

  <button ng-click="myclick()">click</button>
</div>

Wenn ich auf die Schaltfläche klicke, wird ng-model aktualisiert. Wenn ich jedoch vor dem Klicken auf die Schaltfläche Änderungen am Textfeld vornehme, aktualisiert $ rootScope das ng-Modell nicht. Wie kann es also gelöst werden?

0
Navaneet 5 Aug. 2015 im 09:48

3 Antworten

Beste Antwort

Sie können $ Broadcast oder $ Emit verwenden, um abhängig von den Beziehungen zwischen Ihren Controllern.

Wenn Sie $ Broadcast verwenden, haben Sie so etwas in Ihrem zweiten Controller:

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

Und in Ihrem ersten Controller:

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

ODER mit $ emit:

$scope.myclick = function(){
    $rootScope.$emit('eventName', 'myname');
})

Und in Ihrem ersten Controller:

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$ Broadcast - sendet das Ereignis nach unten an alle Kinder

$ emit - Löst das Ereignis nach oben aus

Falls zwischen Ihren Controllern keine Beziehung besteht, können Sie $ rootScope und $ Broadcast verwenden. In Ihrem zweiten Controller sieht dies folgendermaßen aus:

 $rootScope.$broadcast('eventName', value);

Und in Ihrem ersten Controller:

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
1
biancamihai 5 Aug. 2015 im 07:06

Sie sollten Service dafür verwenden, einfache gemeinsame Werte mit Service

JS:

angular.module("app",[])
.controller("ctrl1", ["$scope", "commonValues", function($scope, commonValues){
  $scope.commonValues = commonValues;  
}])
.controller("ctrl2", ["$scope", "commonValues",function($scope, commonValues){  
  $scope.changeValue = function(){
    commonValues.testValue="value change";
  }
}])
.service("commonValues", [function(){
  this.testValue = "test";
}]);

HTML:

<div ng-app="app">
  <div ng-controller="ctrl1">{{commonValues.testValue}}</div>
  <div ng-controller="ctrl2">
    <button ng-click="changeValue()">Change</button>
  </div>
</div>

http://codepen.io/anon/pen/PqVbYy

1
Alcadur 5 Aug. 2015 im 07:00

Entfernen Sie $rootScope, verwenden Sie normales $scope und fügen Sie dann jedem Controller einen neuen Dienst hinzu.

    (function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl1', MyCtrl1);

    MyCtrl1.$inject = ['service'];

    function MyCtrl1($scope, service) {

        $scope.name = service.myScope;
    }
})();
(function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl2', MyCtrl2);

    MyCtrl2.$inject = ['service'];

    function MyCtrl2($scope, service) {

        $scope.myclick = function () {
            service.myclick();
        };
    }
})();


(function () {
    'use strict';

    angular
        .module('myApp')
        .service('service', service);

    service.$inject = [''];

    function service() {

        var self = this;

        self.myScope = 'anonymous';
        self.myclick = function () {
            self.myScope = 'myname';
        };

        return self;

    }

})();
1
ssuperczynski 5 Aug. 2015 im 07:36