jquery - 在从 AngularJS 的 ng-view 指令返回的 HTML 元素上调用 jQuery 函数

Question

我正在使用 angularJS 和 $route 服务来加载部分 View 文件，如下所示。

<ng-view onload="onViewLoad()">
</ng-view>

工作正常。

我的问题是尝试在返回的 html 元素上调用 jQuery 函数，该元素专门尝试从部分文件的 header 类上调用 jQuery bigtext() 函数。我已经尝试过了

        $scope.onViewLoad = function(data){
            $(.bigTitle).bigtext({
                maxfontsize: 40 // default is 528 (in px)
            };
        });

和许多类似的东西，但我的问题是我无法弄清楚如何从部分 View 中按类或 id 选择元素。谁能告诉我或引导我走向正确的方向，以了解我无法从部分 View 访问元素的原因。如果任何代码的更强大的示例将有助于让我知道。谢谢

Answer 1

任何类似的事情都需要在指令中完成。这可以确保您在代码触发时元素存在，并且可以轻松地直接在元素上调用插件...无需担心类或 ID

HTML

<h3 big-text>My Header</h3>

指令

angular.module('myApp').directive('bigText', function () {
    return {
        restrict: 'A', // "A" for attribute
        link: function (scope, elem, attrs) {
            // elem is jQ object
            elem.bigtext({
                maxfontsize: 40 // default is 528 (in px)
            });
        }
    }
});

请注意，当 Angular.js 加载之前 jQuery.js 包含在页面中时，elem 是 link 内的 jQuery 对象，否则它是一个包含许多内容的 jQlite 对象(但是不是全部)包含 jQuery 方法