javascript - 如何从全局范围调用 AngularJS JavaScript 指令方法

Question

我有一个指令，类似于 AngularJS 的示例之一，如下所示。如何从全局范围调用切换方法？我希望能够从一些遗留代码中切换 zippy。

myApp.directive('zippy', 
function(){
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: { title:'bind' },
        template:
        '<div class="zippy">' +
        '<div class="title">{{title}}</div>' +
        '<div class="body" ng-transclude></div>' +
        '</div>',
        link: function(scope, element, attrs) {
            var title = angular.element(element.children()[0]),
            opened = true;
            title.bind('click', toggle);
            function toggle() {
                opened = !opened;
                element.removeClass(opened ? 'closed' : 'opened');
                element.addClass(opened ? 'opened' : 'closed');
            }
            toggle();
        }
    }
});

Answer 1

当你想通过 legacy 访问你的事件时，你应该使用 angular 的 $apply 方法，如下所示：

function set_from_legacy(dom_element) {
    var scope = angular.element(dom_element).scope();
    scope.$apply(function() {
         scope.viewmodel_element.property1 = something;
         scope.viewmodel_element.property2 = somethingelse;
    });
}

然后 Angular 应该启动并更新与视图模型关联的 HTML 中的属性。

例如稍微改变你的模板，使其类名绑定到控制器中的模型 zippy（它当然可以是一个 zippy 的数组）

希望这可以帮助。