Угловое выражение не обновляется при нажатии кнопки

Я могу успешно обновить угловое выражение сразу, но оно не срабатывает при нажатии кнопки. Мне нужна небольшая помощь здесь.Угловое выражение не обновляется при нажатии кнопки

Вот код.

<!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>

Первый звонок, который происходит правильно, правильно обновляет выражение до «первого». Однако второй вызов, когда кнопка нажата, не позволяет выразить выражение «второй». Что я делаю не так?

источник

2015-10-30 r0144

Спасибо всем, кто ответил большими пояснениями. Это помогло изменить мое мышление на Угловое. – r0144

Прежде всего, хороший совет: удалить jQuery из проекта, пока вы не поймете, почему вы не должны использовать jQuery-стиль с помощью приложения Angular. Вскоре 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>

источник

2015-10-30 18:34:48 dfsq

Удалить функцию вокруг углового модуля и вы должны использовать 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

источник

2015-10-30 18:34:39 Sim

Не следует смешивать с JQuery angularjs, если не полностью необходимо. См. Это answer Об этом

Вы должны использовать все события, функции и директивы, предоставляемые angularjs.

Так что ваша куда будет выглядеть на что-то вроде этого

<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()), то нет никакого способа, чтобы угловой сам знал, что модель изменилась.

источник

2015-10-30 18:35:53

Угловое выражение не обновляется при нажатии кнопки

ответ

Смежные вопросы