Question

我可以立即成功更新Angular表达式但按下按钮时失败。我需要一点帮助。

这是代码。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

    <div ng-app="MyApp">
    <div ng-controller="MyController">

        <button id="myButton">Press</button>
        {{myMessage}}

        <script>

            function setMessage(msg) {
                angular.module('MyApp', [])
                   .controller('MyController', function($scope) {
                       $scope.myMessage = msg;
                });
            }

            setMessage("first");

            $(document).ready(function() {
                $('#myButton').on('click', function( event ){
                    setMessage("second");
                });
            });
        </script>

    </div>
    </div>

</body>
</html>

立即发生的第一个调用正确地将表达式更新为“first”。但是，按下按钮时的第二次调用无法将表达式更新为“秒”。我做错了什么？

Answer 1

删除角度模块周围的函数，你应该使用angular的ng-click指令在点击时更新你的html：

<div ng-app="MyApp">
    <div ng-controller="MyController">

        <button id="myButton" ng-click="update('second')">Press</button>
        {{myMessage}}

        <script>

            angular.module('MyApp', [])
               .controller('MyController', function($scope) {
                   $scope.myMessage = "first";

                   $scope.update = function(msg){
                        $scope.myMessage = msg;
                   }
               });

        </script>

    </div>
</div>

ng-click的文档：https://docs.angularjs.org/api/ng/directive/ngClick

Answer 2

首先，好建议：从项目中删除jQuery，直到你明白为什么不应该使用Angular app进行jQuery风格的开发。简而言之，Angular有一个特定的事件/解析/编译生命周期，它与我们在jQuery项目中使用的流程不同。看看this thread。

然后你需要做的是使用ngClick指令：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div ng-app="MyApp">
    <div ng-controller="MyController">
        <button ng-click="setMessage('second')">Press</button>
        {{myMessage}}
  </div>
</div>

<script>
angular.module('MyApp', [])
.controller('MyController', function($scope) {
    $scope.myMessage = 'first';
    $scope.setMessage = function(msg) {
        $scope.myMessage = msg;
    };
});
</script>

Answer 3

除非完全需要，否则不要将jQuery与angularjs混合使用。请参阅此answer了解

你应该使用angularjs提供的所有事件，函数和指令。

所以你的coude会看起来像这样

<div ng-app="MyApp">
    <div ng-controller="MyController">

    <button ng-click="setMessage()">Press</button>
        {{myMessage}}

        <script>
            function setMessage(msg) {
                angular.module('MyApp', [])
                   .controller('MyController', function($scope) {
                       // set the original value for myMessage
                       $scope.myMessage = "first";
                       // update with second value
                       $scope.setMessage = function(){
                            $scope.myMessage = "second";
                       }
                });
            }
        </script>
    </div>
</div>

当然你应该更好地组织这个，但这是第一种方法

主要区别在于，如果您使用角度事件（例如在这种情况下为ng-click），它将让Angular知道某些内容已发生变化，并且必须更新/刷新视图。

如果你用jQuery改变一些东西，除非你强迫角度知道它（使用$scope.$apply()），角度就无法知道模型已经改变了。

按下按钮时未更新角度表达式

3 个答案: