应用。现在我想用AngularJS实现一个动态菜单。因此,我需要从现有应用程序更改AngularJS应用程序中的变量。
我正在尝试以下示例:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl" id="myApp"> First Name: <input type="text" ng-model="firstName"> <br>Last Name: <input type="text" ng-model="lastName"> <br> <br>Full Name: {{firstName + " " + lastName}} <button ng-click="resetName()">hi</button> </div> <script type="text/javascript"> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.resetName = function() { $scope.firstName = "John1"; $scope.lastName = "Doe1"; } }); </script> <button onclick="angular.element('#myApp').scope().resetName(); angular.element('#myApp').scope().apply();">extern</button>
从外部脚本调用“ resetName()”函数的正确方法是什么?
只需将选择器附加到定义了控制器的DOM元素即可。喜欢
<div ng-app="myApp" ng-controller="myCtrl" id="myCtrl">
在任何地方都可以调用该控制器功能,例如
angular.element('#myCtrl').scope().resetName()
要么
angular.element(document.querySelector('#myCtrl')).scope().resetName()
在某些情况下,您需要修改控制器的对象值,您可以通过简单的方式进行操作。只需使用
angular.element(document.querySelector('#myCtrl')).scope().title = 'test';
注意:请不要忘记apply更改,因为现在角度不会apply自动触发。您需要apply手动触发。在更新对象中的值后将其放在行下方
apply
angular.element(document.querySelector('#myCtrl')).scope().apply();