Question

我正在尝试使用angularjs进行jQuery，因此制作了一个简单的应用程序包含index.html和first.html，second.html，third.html，fourth.html 当你点击背景颜色变化时，每个子页面都包含一个按钮。

代码：我通过将函数附加到$ scope来编写第四个略有不同的函数，而其他三个函数只在控制器中使用了jQuery函数。

查看：所有按钮都能正常工作，但第四页上的第四个按钮需要点击两次才能工作。

注意：控制台中根本没有错误。

这是我在github上的回购： https://github.com/shireefkhatab/ng-query 和网站视图 http://shireefkhatab.github.io/ng-query

提前谢谢你。

Answer 1

在第四页上，您已将该功能绑定到ng-click，您需要点击已经通过jQuery订阅了click事件。

离开

$('body').css('backgroundColor','lightgray');

在forthButton函数的主体中。

Answer 2

此编辑应有所帮助：

gst-launch-1.0 -e videomixer name=mix \
    ! autovideosink \
    videotestsrc\
            ! video/x-raw, framerate=10/1, width=640, height=360 \
            ! mix.sink_0 \
    videotestsrc pattern="snow" \
            ! video/x-raw, framerate=10/1, width=200, height=150 \
            ! mix.sink_1

你必须点击两次的原因是第一次单击触发$ scope.fourthButton（）方法（这是你真正需要的）并设置jquery“click”监听器，这是不必要的。 ng-click为您处理“点击”部分。所以我会使用点击触发的jQuery方法或“Angular”方式。

Answer 3

您必须单击两次，因为您正在使用ng-click添加jQuery点击处理程序，第二次点击将触发附加的点击处理程序。

首先，尽量避免使用jQuery。 AngularJs大部分时间都不需要它。如果你真的需要它，只能在指令中使用它。

所以改变风格的Angular方式是这样的：

app.controller('fourthController',function($scope){
    $scope.item = "page 4";
    $scope.fourthButton = function(){
        $scope.myStyle = {'backgroundColor': 'lightgray'};
    };
});

在html标记中：

<body ng-style="myStyle">
....
</body>

请看下面的演示。

＆＃13;

var app = angular.module('app', []);
app.controller('fourthController', function($scope) {
  $scope.item = "page 4";
  $scope.fourthButton = function() {
    $scope.myStyle = {'background-color': 'lightgray'};
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">

<body ng-style="myStyle" ng-controller="fourthController">
  <button ng-click="fourthButton()">fourth</button>
 {{myStyle}}
  </body>

</html>

＆＃13;

单击jQuery按钮

3 个答案: