为什么dom事件在angularjs里面的控制器里面不起作用

我有一个这样的控制器，它连接到html的body。为什么dom事件在angularjs里面的控制器里面不起作用

angular.module("app", []) 

.controller("MyCtrl", function($scope) { 

    // Here I perform some jquery code listening for click event 

    $("a").click(function() { 
     $(this).toggleClass("active"); 
    }); 

});

现在，我想知道为什么这不起作用的控制器内。我知道，如果我将其纳入指示，那么它确实有效。

来源

2014-11-17 Ashish Rawat

你是什么意思，它不起作用？更具体一点。 – Wawy

不是直接的答案，但在我看来，DOM操作不应该在控制器内。这种方法有一些特定的目的吗？就像你说的那样，它在指令中起作用。 – zvona

我想你应该再读一遍AngularJs控制器。你定义的那个函数被用作构造函数 –

Don't mix up JQuery with AngularJS，因为它不是一个好的做法，

如果你想要一些切换功能使用内置ngClick指令功能，通过AngularJs提供的，而不是使用JQuery$("a").click

Sample Demo 1

Sample Demo 2

Sample Demo 3

Sample Demo 4

function MainController($scope) { 
 
    $scope.toggle = true; 
 
}

.box { 
 
    color: white; 
 
    text-align: center; 
 
    height: 100px; 
 
    font-size: 86px; 
 
} 
 
.on { 
 
    background-color: green; 
 
} 
 
.off { 
 
    background-color: red; 
 
} 
 
.box-show-setup, 
 
.box-hide-setup { 
 
    -webkit-transition: all linear 0.3s; 
 
    -moz-transition: all linear 0.3s; 
 
    -ms-transition: all linear 0.3s; 
 
    -o-transition: all linear 0.3s; 
 
    transition: all linear 0.3s; 
 
} 
 
.box-show-setup { 
 
    opacity: 0; 
 
    height: 0; 
 
} 
 
.box-show-setup.box-show-start { 
 
    opacity: 1; 
 
    height: 100px; 
 
} 
 
.box-hide-setup { 
 
    opacity: 1; 
 
    height: 0; 
 
} 
 
.box-hide-setup.box-hide-start { 
 
    opacity: 0; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app ng-controller="MainController"> 
 
    <button ng-click="toggle = !toggle">Toggle!</button> 
 

 
    <div class="box on" ng-show="toggle" ng-animate="'box'">On</div> 
 
    <div class="box off" ng-hide="toggle" ng-animate="'box'">Off</div> 
 
</div>

又读这个美丽的东西

Using AngularJS? Stop using jQuery as a crutch.

来源

2014-11-17 09:43:59

为什么dom事件在angularjs里面的控制器里面不起作用

回答

相关问题