从其他脚本调用 AngularJS [英] Call AngularJS from other scripts
问题描述
申请.现在我想用 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">名:<input type="text" ng-model="firstName"><br>姓氏:<input type="text" ng-model="lastName"><br><br>全名:{{firstName + " " + lastName}}<button ng-click="resetName()">hi</button>
<script type="text/javascript">var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.firstName = "约翰";$scope.lastName = "Doe";$scope.resetName = function() {$scope.firstName = "John1";$scope.lastName = "Doe1";}});<button onclick="angular.element('#myApp').scope().resetName(); angular.element('#myApp').scope().apply();">extern</button>
从外部脚本调用resetName()"函数的正确方法是什么?
只需将选择器附加到定义控制器的 DOM 元素即可.喜欢
你可以从任何地方调用这个控制器函数,比如
angular.element('#myCtrl').scope().resetName()
或
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();
application. Now i want to implement an dynamic menu with AngularJS. Therefore i need to change variables in the AngularJS application from my existing application.
I'm trying with this example:
<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>
what would be the correct way to call the "resetName()" function from an external script?
解决方案 Just attach a selector to your DOM element where your controller is defined. like
<div ng-app="myApp" ng-controller="myCtrl" id="myCtrl">
and from anywhere you can call this controller function like
angular.element('#myCtrl').scope().resetName()
OR
angular.element(document.querySelector('#myCtrl')).scope().resetName()
In some case you need to modify a object value of controller you can do it in simple way. Just use
angular.element(document.querySelector('#myCtrl')).scope().title = 'test';
Note : Please don't forget to apply
the changes because now angular will not trigger apply
automatically. You need to trigger apply
manually. Just put below line after updating values in object/s
angular.element(document.querySelector('#myCtrl')).scope().apply();
这篇关于从其他脚本调用 AngularJS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文