Question

好的，我有点......对这个插件感到困惑..我在身体的末尾添加了脚本

<body>
    <div id="first"> 
          //a lot of text
    </div>
    <div id="second">
         //more text
    </div>
    <div id="leo">
        //here is where the plugin should work
    </div>
</body>
<script src="js/jquery.appear.js"></script>
</html>

这就是我在js文件中的内容

app.controller('comparativaCtrl', function ($scope, $rootScope, $routeParams, $location, $http, Data) 
{
    $('#leo').appear();
      $(document.body).on("appear", "#leo", function() {
        alert("al fin");
    });
});

然而，没有任何反应......我检查过并且我有jquery，除此之外，据我所知，这并不需要依赖....请注意app.controller是因为我的js代码使用是部分控制器（我正在使用Angular）。如果有人知道为什么这不起作用，请告诉我

Answer 1

创建一个新的directives.js并在那里添加所有的jquery函数。在.cshtml文件中，只需指定指令的名称即可。例如： customdirective.js

angular.module('directiveName', []).directive('appear', ['$window', function ($window) {
    return function (scope, element, attr) {
        var wndw = angular.element($window);
        scope.initAppear = function () {
//your code
    }
}]);

Flower.cshtml：

<body>
    <div id="first"> 
          //a lot of text
    </div>
    <div id="second">
         //more text
    </div>
    <div id="leo" appear>
        //here is where the plugin should work
    </div>
</body>
</html>

Answer 2

您应该始终在指令中执行DOM操作，以下是创建和使用它的示例。

app.directive('appearWrapper', [
    function() {
        return {
            restrict: "A",
            link: function(scope, element, attrs) {
                $(element)
                    .appear()
                    .on('appear', function() {
                        //Do the needful
                    });

            }
        };
    }
]);

用法

<div appear-wrapper>
    //here is where the plugin should work
</div>

好文章jQuery Plugin in an Angular App和"Thinking in AngularJS" if I have a jQuery background?

当元素出现时，jquery.appear插件无效

2 个答案: