如何从其他控制器更改角度模型值

How to change angular model value from other controller

本文关键字：模型 其他 控制器      更新时间：2023-09-26

这里是小角度代码。

<html>
    <head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    </head>
    <body>
    <div ng-app="myApp" ng-controller="personCtrl">
    <button ng-click="toggle()">Hide user</button>
    <p ng-hide="myVar">
    First Name: <input type=text ng-model="firstName"><br>
    Last Name: <input type=text ng-model="lastName"><br><br>
    Full Name: {{firstName + " " + lastName}}
    </p>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {
        $scope.firstName = "John",
        $scope.lastName = "Doe"
        $scope.myVar = false;
        $scope.toggle = function() {
            $scope.myVar = !$scope.myVar;
        }
    });
    </script> 
    </body>

所以当我们在文本框中更改值时，更改会反映在标签中。假设我还有一个叫Test的按钮。我想当用户点击测试按钮时，通过ng js代码，我将通过其他ng控制器代码更改名字文本框中的值。如果可能的话，请帮我处理代码。感谢

我将提供另一种方法。

DO使用工厂操作模型。

不要使用广播，因为你的应用程序在一个更大的scle上会有应用程序范围内的braodcast无缘无故地到处拍摄。

如果您以这种方式构建应用程序，您将更容易操作模型并确保它们在应用程序中同步。它最终会让测试和堆栈跟踪在未来变得更容易。

注意：我公开了一种点击更新模型的方法，但这并不重要，我这样做主要是为了向你展示如何在工厂中操作所有的模型更改，如果需要的话，只需使用非常小的控制器来触发更改。

示例HTML:

<html>
<body ng-app="app">
    <div ng-controller="testCtrl as test">
        <input type="text" ng-model="test.model.name"> 
    </div>
    <div ng-controller="testCtrl2 as test2">
        <input type="text" ng-model="test2.model.name"> 
    </div>
    <script type="text/javascript" src="https://code.angularjs.org/1.2.26/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>   
</body>
</html>

示例app.js

(function(){
    "use strict";
    angular.module('app',[]);
    function testCtrl( testFactory ){
        var testCtrl = this;
        testCtrl.model = testFactory.model;
        testCtrl.send = testFactory.updateName;
    }
    function testCtrl2( testFactory ){
        var testCtrl2 = this;
        testCtrl2.model = testFactory.model;
    }
    function testFactory(){
        var testFactory = this;
        testFactory.model = {
            name: "test"
        };
        testFactory.updateName = function( newValue ){
            testFactory.model.name = newValue;
        }
        return testFactory;
    }
    angular.module('app')
        .controller('testCtrl', ['testFactory', testCtrl])
        .controller('testCtrl2', ['testFactory', testCtrl2])
        .factory('testFactory', [testFactory]);

})();

如果你想要一个很好的最佳实践教程，请从以下内容开始：http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/

<html>
<body ng-app="app">
    <div ng-controller="testCtrl">
        <input type="text" ng-model="name"> 
        <button ng-click="send()" >Send</button>
    </div>
    <div ng-controller="testCtrl2">
        <input type="text" ng-model="name"> 
    </div>
    <script type="text/javascript" src="https://code.angularjs.org/1.2.26/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>   
</body>
</html>

---app.js------------------

var app= angular.module('app',[]);
app.controller('testCtrl',function($scope,$rootScope){
    $scope.name = "test";
    $scope.send = function(){
    $rootScope.$broadcast('sendEvent', { any: $scope.name });
});
app.controller('testCtrl2',function($scope, $rootScope){
    $rootScope.$on('sendEvent', function(event, args) {
    $scope.name = args.any;
});
相关文章：