应用。现在我想用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>
调用&#34; resetName()&#34;的正确方法是什么?从外部脚本中运行?
答案 0 :(得分:7)
只需将选择器附加到定义控制器的DOM元素即可。像
<div ng-app="myApp" ng-controller="myCtrl" id="myCtrl">
并且可以从任何地方调用此控制器功能,如
angular.element('#myCtrl').scope().resetName()
OR
angular.element(document.querySelector('#myCtrl')).scope().resetName()
在某些情况下,您需要修改控制器的对象值,您可以以简单的方式执行此操作。只需使用
angular.element(document.querySelector('#myCtrl')).scope().title = 'test';
注意:请不要忘记apply
更改,因为现在angular不会自动触发apply
。您需要手动触发apply
。在更新object / s
angular.element(document.querySelector('#myCtrl')).scope().apply();