Question

这里是小角度代码。

<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控制器代码的名字文本框中的值。如果可能请帮我代码。感谢

Answer 1

我将提供另一种方法。

DO 使用工厂来操纵模型。

DON＆＃39; T 使用广播，因为你的应用程序在较大的scle上会有无处不在的appwide广播拍摄。

如果您以这种方式构建应用程序，您可以更轻松地操作模型并确保它们在应用程序中同步。当你将来达到目的时，它最终会使测试和堆栈跟踪变得更容易。

注意：我公开了一种方法来点击更新模型，但它并不重要，我主要是为了向您展示如何在工厂中操纵所有模型更改并简单地使用非常小的控制器来如果需要，则触发然后更改。

示例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/

Answer 2

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

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

2 个答案: