Question

我有学校的任务。我们有这样的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.js的javascript内容为：

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获取价值？

感谢。

Answer 1

您可以使用广播

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

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

控制器2将收到我们的活动

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

此处 anyData 代表您要传递的对象

Answer 2

使用ng-model。

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

Answer 3

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

如果您可以附加HTML，则可以使用$ rootscope，这样可以从另一个控制器访问由TestController设置的值。或者您可以添加全局应用程序值。我创建了一个小提琴，显示了两个选项：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);
            };
        };
    }
]);

Answer 4

这就是角度服务的用途。他们通过控制器传输数据。您可以使用NG的$ broadcast来发布包含数据的事件，但是可以使用Providers，Services和Factories来解决这个问题。

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

Here's a fiddle帮助您了解事物。祝学校好运！

JavaScript角度控制器从另一个控制器

4 个答案: