Question

我有以下Angular代码：

app.controller('MainCtrl', function($rootScope, $http) {

    $rootScope.graph = {'width': '100%', 'height': 500};
    $rootScope.rectangles = [
        //     {'x':220,  'y':220,  'width' : 300, 'height' : 100},
        // {'x':520,  'y':220,  'width' : 10, 'height' : 10},
        //valid JSON:  {"rect":{"x":220,  "y":220,  "width" : 300, "height" : 100}, "info":""}
    ];

//more code

如您所见，我有一个由单个模块，单个控制器组成的应用程序。

我有一个函数，其目的（与其他辅助函数一起）填充数组矩形。该函数称为DrawMatrix。

在HTML方面，使用此功能的代码如下：

 <div id="body">
    <div ng-controller="MainCtrl" ng-app="app">
        <div class="col-sm-6 col-md-6 col-lg-6" style="background-color: #D2D7D3">

            <div style="padding:25px;">

                <div class="col-sm-8 col-md-8 col-lg-8 input-group">
                    <span class="input-group-addon" id="basic-addon1">Number of questions:</span>
                    <input id="NumQuest" type="text" class="form-control" placeholder="Please enter number of questions..." aria-describedby="basic-addon1">
                </div>

                <div class="btn-group" role="group" aria-label="...">
                    <button ng-click="DrawMatrix(NumQuest)" type="button" class="btn btn-default">Draw</button>
                    <button ng-click="DelMatrix(NumQuest)" type="button" class="btn btn-default">Clean</button>
    //More code

然后，在我的界面上，我还有一组文本框，当你点击它们时会执行一些操作，并且这样的动作的代码示例如下：

var totalNumOfQuestions = 1;
//Actualizar NumQuest de acordo com a variavel indicada acima!!
$(function(){
    $(document).on('focus', 'div.form-group-options div.input-group-option:last-child input', function(){

        var sInputGroupHtml = $(this).parent().html();
        var sInputGroupClasses = $(this).parent().attr('class');
        $(this).parent().parent().append('<div class="'+sInputGroupClasses+'">'+sInputGroupHtml+'</div>');

        //Testes
       // alert( totalNumOfQuestions);
        var NumQuest=document.getElementById("NumQuest").value;
        //alert(NumQuest);
        var $body = angular.element(document.querySelector('body'));   // 1
        var $rootScope = $body.scope().$root;         // 2
        $rootScope.$apply(function () {               // 3
            $rootScope.DrawMatrix(1);
        });
        totalNumOfQuestions+=1;
        //fim
    });

您可能已经注意到，我想要做的是：

当我单击其中一个文本框，而不是将警报作为动作发送时，我想触发对AngularJS控制器内定义的函数的调用。

这样的事情似乎与我想要的一样，但是，我无法让它发挥作用：

How to access/update $rootScope from outside Angular

我知道这是不好的做法，我可以使用服务或注射器或其他东西，但是，我不知道它，我只需要让它只适用于一个非常特殊的功能。

任何帮助将不胜感激。

Answer 1

我认为只有querySelector $body变量出现在错误的DOM元素中。它应该是您添加ng-controller的元素。

你可以得到它：

var $rootScope = angular.element($('div[ng-controller="MainCtrl"]')).scope().$root;

请查看下面或此jsfiddle中的“不良做法”示例。

angular.module('demoApp', [])
    .controller('mainController', function ($rootScope) {
    $rootScope.dummy = 'Test\r\n';
    $rootScope.addText = function (text) {
        $rootScope.dummy += text + '\r\n';
    };
});

$(function () {

    $('#test').click(function () {
        var $rootScope = angular.element($('div[ng-controller="mainController"]')).scope().$root;

        $rootScope.$apply(function () {
            //scope.dummy += 'test'; // works
            $rootScope.addText('test');
        });
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <button id="test">test</button>
    <pre>{{dummy}}</pre>

</div>

Answer 2

当我单击其中一个文本框，而不是将警报作为动作发送时，我想触发对AngularJS控制器内定义的函数的调用。

为什么不在文本框中使用ng-click或ng-focus属性？

调用Angular应用程序范围之外的函数

2 个答案: