将全局变量从控制器调用到HTML视图AngularJS
Calling Global Variable from Controller to HTML View AngularJS
我在Plunkr中有以下代码。http://plnkr.co/edit/8sBafktFzFa8fCLLJgMF
这是我的js文件
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalDemoCtrl',
size: size
});
var applicantID = 12;
};
$scope.submit_info = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent1.html',
controller: 'ModalDemoCtrl',
size: size
});
};
});
这是我的html页面
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<h3>I'm a modal!</h3>
<button class="btn btn-default" ng-click="submit_info('lg')">Submit</button>
</script>
<script type="text/ng-template" id="myModalContent1.html">
<h3>CaseID: </h3>
{{ applicantID }}
</script>
<button class="btn btn-default" ng-click="open()">Set caseID</button>
</div>
</body>
</html>
我希望能够在单击按钮"setID"时分配应用程序ID,并在点击按钮"submit"时显示传递的应用程序ID值"12"。但它一直在传递一个空数据。
您可以将其与$rootScope:-绑定
$rootScope.applicantID = 12;
Plunker
您必须将applicationID变量与作用域相关联。只有这样,您才能在视图中访问它。
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.applicantID = 12;
.
.
});
更新Plunker此处
如果我正确理解您的问题,这就是答案。
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalPopupCtrl,
size: size
});
var applicantID = 12;
};
});
function ModalPopupCtrl($scope,$modal){
$scope.applicantID = 12;
$scope.submit_info = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent1.html',
controller: ModalPopupCtrl,
size: size
});
};
}
相关文章:
- 如何使用ExpressJS(在主视图/根视图上)呈现带有参数的HTML视图
- Angular数组更改时更新HTML视图
- 部分html视图's控制器未使用KendoPanelBar内容URL在指令模板URL中工作
- 将全局变量从控制器调用到HTML视图AngularJS
- 将数据从控制器调用到HTML视图AngularJS
- 将变量传递到html视图angularjs中
- 如何用程序禁用HTML视图源代码或加密HTML元素
- 在 Angular 控制器完成加载异步函数后加载 html 视图
- 如何在 Angular 中的基本 HTML 视图中加载视图
- 我可以在控制台中打印值,但不能在 html 视图中打印值
- ng-repeat显示的行等于属性的数量,甚至不在HTML视图上显示数据
- 为什么这些变量不在 html 视图中打印
- 如何将另一个Paper变量添加到JointJs的HTML视图中
- HTML视图在搜索(ajax)更新期间丢失状态
- 我如何传递node.js服务器变量到我的angular/html视图
- HTML视图看不到AngularJS
- 为多个客户端呈现html视图
- 将html视图转换为图像
- 我可以在chrome控制台使用javascript测试动态html视图吗?
- 无法用Angular从HTML视图获取值到控制器.解决方案返回$scope变量undefined