Question

我正在使用AngularJS框架构建HTML应用程序。我有一些遗留的JavaScript动作需要访问Angular对象中的一个函数，我无法让它工作这是Angular对象（我需要访问的函数是$scope.info()）：

function content($scope) {
    $scope.info = function (id) {
        console.log('Got a call from '+id);
        $scope.text = "Hello, "+id;
    };
}

我试图通过angular.element('content').scope().info('me')访问它，但没有结果（控制台说undefined）。我试图转储angular.element('content').scope()的结果，我得到了完整的对象列表和所有内容。从理论上讲，我的第一个例子应该有效，但事实并非如此。

非常感谢任何关于如何实现这一目标的指导！ _{^{（PS：Call Angular JS from legacy code未解决此问题。）}}

当我终于能够访问该功能时，它无法按预期工作 - $scope.text的值在技术上已修改，但HTML中使用的表达式未更新！例如，从外部函数调用此函数后，<p>{{text}}</p>不会更新。

有什么方法可以解决这个问题吗？

Answer 1

angular.element()需要一个 DOM元素，所以如果你有这个html：

<div ng-controller="content">
</div>

并且您想要访问其DOM元素，请使用id：

<div id="myDiv" ng-controller="content">
</div>

然后

angular.element($('#myDiv')).scope().info('me')

或没有jQuery：

angular.element(document.getElementById('myDiv')).scope().info('me')

应该有用。

修改

如果您更改了范围内的某些内容，则可能需要使用$apply()：

angular.element(document.getElementById('myDiv')).scope().$apply();

Answer 2

对我来说，我试图从回调中访问/设置角度值（在另一个窗口中）;解决方案是使用jQuery的data方法。 data API允许您将对象文字附加到DOM节点。因此，我不是采用类似全局变量（也可以工作）的东西，而是执行类似的操作：

/**
 * Listen to a global "lookupTemplate" event
 */
$j(document).on("lookupTemplate", function(event, template) {
        $j(document).data("template", template);
        window.open("/callbackURL", 'Callback Window', 'status=0,toolbar=0,height=230,width=358');
    });

/**
* Callback from other window, to change template ID and name (it's global)
* @param {String} template_id the ID for the selected template from the other window
* @param {String} template_name the name for the selected template from the other window
*/
function templateChosen(template_id, template_name) {
    var template = $(document).data("template");
    var appendedSelector = "[" + template.index + "]";
    $('[name="templateId' + appendedSelector + '"').val(template_id);
    $('[name="templateName' + appendedSelector + '"').val(template_name);
    // Update angular vars just in case
    template.id = template_id;
    template.name = template_name;
}

var app = angular.module("app", []).controller("ActionsController", function($scope) {
        $scope.actions = [];
        $scope.lookupTemplate = function(index) {
            $scope.actions[index].template.index = index;
            $(document).trigger("lookupTemplate", $scope.actions[index].template);
        }
    }
);

我使用name帮助器增加每个新action的{{1}}属性，包含在Angular中。

从JS外部访问Angular对象的函数

2 个答案: