Question

在页面加载控制台日志打印但是toggleClass / click不起作用我甚至使用angular.element但它有相同的结果。我需要改变状态以便toggleClass工作。我不知道什么是错的我的代码。

    .run(['$rootScope', function ($rootScope) {
        console.log('test');//this prints test and it's ok       

	//this part won't load at the first loading of page.
                $('.toggle-mobile').click(function(){
                    $('.menu-mobile').toggle();
                    $(this).toggleClass('toggle-click');
                });
    //....
   }])

即使这样做也行不通。

            $rootScope.$on('$viewContentLoaded', function () {

                angular.element('.toggle-mobile').on('click', function (event) {
                    angular.element(this).toggleClass('toggle-click');
                    angular.element('.menu-mobile').toggle();
                    event.preventDefault();
                });

            });

Answer 1

呈现项目的Angular方式不同于＆＃34;在DOM Ready＆＃34;这就是为什么我们需要将它们视为两个独立的东西。

Angular甚至可以在DOM准备好后再渲染项目，例如，如果存在AJAX调用（$http.get），这可能会发生，这就是为什么指令可能是推荐的方法。

尝试这样的事情：

<body ng-controller="MainCtrl">
  <div toggle-Me="" class="toggle-mobile"> Sample <div class="menu-mobile">Sample 2</div>
  </div>

<script>

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', ['$scope', function ($scope) {}]);

myApp.directive("toggleMe", function() {
    return {
            restrict: "A", //A - means attribute
            link: function(scope, element, attrs, ngModelCtrl) {
              $(element).click(function(){
                $('.menu-mobile').toggle();
                $(this).toggleClass('toggle-click');
             });
            }
        };
});

...

每当angular生成输入元素时，通过将指令myApp.directive("toggleMe",...声明为属性toggle-Me=""，它将执行指令中的链接函数。

免责声明：由于帖子缺少示例html，我编写了一些内容，以便了解如何实现解决方案，但当然建议的html不是解决方案的一部分。

Angular脚本在首次加载时不会运行

1 个答案: