JavaScript 角度控制器从另一个控制器的作用域中获取值

JavaScript angular controller get value from scope from another controller

本文关键字：控制器 作用域 获取 另一个 JavaScript      更新时间：2023-09-26

我有学校任务。我们有这样的 HTML 代码：

<html ng-app="myTest">
<head><script type="text/javascript" src="../myScript.js"></script>
</head>
<body id="tst" class="textpage" ng-controller="TestController as testcon">
    <form class="" id="frm" ng-submit="doStuff()">
        <div class="form-group">
        {{testinfo}}
        </div>
        <div class="form-group">
        <button type="submit" id="sbtn" name="sbtn">testSubmit</button>
        </div>
    </form>
</body>
</html>

名为myScript的javascript的内容.js是这样的：

var tester = angular.module('myTest', ['ui.mask']);
tester.controller('TestController', ['$scope', '$http', '$location', '$window', function ($scope, $http, $location, $window) {
            $scope.doStuff = function () {
                {
                    $scope.testinfo = 'unknown value';
                };
            };
        }
    ]);

我可以选择添加新的javascript。但我不可能从$scope.testninfo获得价值。我无法编辑现有的JavaScript，也无法编辑HTML文件。我可以添加新的javascript。

有没有选择如何在另一个javascript中从$scope.testinfo获取值？

谢谢。

您可以使用广播

从控制器 1 开始，我们广播一个事件 

$scope.$broadcast('myEvent',anyData);

控制器 2 将接收我们的事件 

$scope.$on('myEvent', function(event,anyData) { 
        //code for controller 2
    });

这里anyData表示要传递的对象

使用 ng-model。

<div class="form-group">
    <input type="text" ng-model="testinfo">
 </div>

我认为如果不附加现有的javascript/html是不可能的。因为无法从另一个控制器（文件）访问测试控制器的$scope。

如果您可以附加 HTML，则可以使用该$rootscope，这样，测试控制器设置的值可以从另一个控制器访问。或者，可以添加全局应用值。我创建了一个小提琴，它显示了两个选项：https://jsfiddle.net/Appiez/wnyb9pxc/2/

    var tester = angular.module('myTest', []);
tester.value('globalVar', { value: '' });
tester.controller('TestController', ['$rootScope', '$scope', '$http', '$location', '$window', 'globalVar', function     ($rootScope, $scope, $http, $location, $window, globalVar) {
        $scope.doStuff = function () {
            {
                $rootScope.testinfo = 'this is the new value';
                globalVar.value = 'a global value';
            };
        };
    }
]);
tester.controller('TestController2', ['$rootScope', '$scope', 'globalVar', function ($rootScope, $scope, globalVar) {
            $scope.doStuff2 = function () {
            {
                alert($rootScope.testinfo);
                alert(globalVar.value);
            };
        };
    }
]);

这就是角度服务的目的。它们在控制器之间传输数据。您可以使用 NG 的$broadcast发布包含数据的事件，但提供程序、服务和工厂就是为了解决这个问题而构建的。

angular.module('krs', [])
.controller('OneCtrl', function($scope, data){
    $scope.theData = data.getData();
})
.controller('TwoCtrl', function($scope, data){
    $scope.theData = data.getData();
})
.service('data', function(){
    return {
        getData: function(){
            return ["Foo", "Bar"];
        }
    }
});

这里有一个小提琴，可以帮助你进入事情的摇摆。祝你在学校好运！

相关文章：