可以't在相同的局部视图Angularjs中加载两个控制器
Can't load two controllers in same partial view Angularjs
我正试图加载第二个控制器来填充视图中的select,但它不起作用。这是我的代码:
app.js
(function() {
'use strict';
angular
.module('app.lazyload')
.constant('APP_REQUIRES', {
scripts: {
'modernizr': ['vendor/modernizr/modernizr.custom.js'],
'icons': ['vendor/fontawesome/css/font-awesome.min.css',
'vendor/simple-line-icons/css/simple-line-icons.css'],
'companiesCtrl': ['app/js/modules/companies/data.js','app/js/modules/companies/controller.js'],
'companyDetailCtrl': ['app/js/modules/companies/data.js','app/js/modules/companies/controller_detail.js'],
'documentTypeCtrl': ['app/js/modules/document_type/data.js','app/js/modules/document_type/controller.js']
});
})();
////////////////////////////////////
.state('app.companies.detail', {
url :'/companies.detail/',
title : 'Company',
templateUrl : helper.basepath('companies/companies.detail.html'),
resolve : helper.resolveFor('companyDetailCtrl','documentTypeCtrl'),
controller : ('companyDetailCtrl')
})
.state('app.companies.document_type', {
url :'/companies.detail/',
title : 'Document Type',
templateUrl : helper.basepath('companies/companies.detail.html'),
controller : ('documentTypeCtrl')
})
company.detail/controller.js
(function() {
'use strict';
angular
.module('assets4')
.controller('companyDetailCtrl', companyDetailCtrl);
companyDetailCtrl.$inject = ['$scope','Data','$log', '$state'];
function companyDetailCtrl($scope, Data, $log, $state){
$log.log('Controller > companyDetailCtrl loaded');
Data.get('companies/'+$scope.company_id).then(function(data){
$scope.companyDetail = data[0];
//$log.log($scope.companyDetail);
});
};
})();
document_type/controller.js(此文件在浏览器中正确加载)
(function() {
'use strict';
angular
.module('assets4')
.controller('documentTypeCtrl',documentTypeCtrl)
documentTypeCtrl.$inject = ['$scope','DataDocType','$log'];
function documentTypeCtrl($scope, DataDocType, $log, $state) {
DataDocType.get('document_type').then(function(data){
$scope.document_type = data;
$log.log('Controller > documentTypeCtrl loaded');
});
};
})();
EDIT>添加公司/controller.js
(function() {
'use strict';
angular
.module('assets4')
.controller('companiesCtrl', companiesCtrl)
companiesCtrl.$inject = ['$scope','Data','$log', '$state'];
function companiesCtrl($scope, Data, $log, $state) {
Data.get('companies').then(function(data){
$scope.companies = data;
$log.log('Controller > companiesCtrl loaded');
});
$scope.onRowClick = function(company_id){
$scope.company_id = company_id;
$state.go('app.companies.detail');
};
};
})();
EDIT>添加公司.html
<div class="row" ng-controller="PanelsCtrl as panel">
<div class="col-xs-12">
<div class="panel panel-default" >
<div class="panel-heading">
<paneltool tool-refresh="traditional"></paneltool>
</div>
<div class="panel-body">
<div ui-view>
<div class="table-responsive">
<table id="companiesGrid" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>{{ 'companies.grid.NAME' | translate }}</th>
<th>{{ 'companies.grid.DOCUMENT' | translate }}</th>
<th>{{ 'companies.grid.ADDRESS' | translate }}</th>
<th>{{ 'companies.grid.PHONE1' | translate }}</th>
<th>{{ 'companies.grid.EMAIL' | translate }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="company in companies track by $index" ng-class="{'active': company.company_id}" ng-click="onRowClick(company.company_id)">
<td>{{company.company_id}}</td>
<td>{{company.company_name}}</td>
<td>{{company.company_document_number}}</td>
<td>{{company.company_address}}</td>
<td>{{company.company_phone1}}</td>
<td>{{company.company_email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT>添加公司详细信息.html
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.ID' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_id" disabled/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.NAME' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_name"/>
</div>
</div>
<div class="form-group mb">
<label class="col-lg-2 control-label">Chosen Ajax</label>
<div class="col-lg-10">
<select chosen="" ng-model="document_type" ng-options="s for s in form.states" width="'100%'" class="chosen-select input-md">
<option value=""></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.DOCUMENT' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_document_number"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.ADDRESS' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_address"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.PHONE1' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_phone1"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.PHONE2' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_phone2"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.WEBSITE' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_website"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.EMAIL' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_email"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">{{'companies.grid.LOGO' | translate}}</label>
<div class="col-lg-10">
<input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_logor" disabled/>
</div>
</div>
<button type="submit" class="btn btn-lg btn-info" onclick="history.back()">Volver</button>
<button type="submit" class="btn btn-lg btn-info" onclick="">Guardar</button>
<button type="submit" class="btn btn-lg btn-info" onclick="">Eliminar</button>
</form>
app.company.detail正在完美加载,填充完整的表单。
我也试过使用ng控制器,但什么也没发生。我达不到此代码
$log.log('Controller>documentTypeCtrlloaded');
我做错了什么?我对Angularjs很陌生。
谢谢。
我在路由配置中加载了控制器。
我认为您在inject语句中缺少"$state":
不正确的
documentTypeCtrl.$inject = ['$scope','DataDocType','$log'];
校正
documentTypeCtrl.$inject = ['$scope','DataDocType','$log','$state'];
相关文章:
- 动态加载angularjs并生成控制器和范围
- 如何通过jQueryUI AJAX加载AngularJS内容
- 动态加载AngularJS应用程序
- 刷新/重新加载angularjs自定义指令
- 异步加载AngularJS应用程序
- 使用NgInclude加载AngularJS组合指令模板
- 加载angularjs计时器加15分钟
- 使用jQuery加载AngularJS
- 无法在coffeescript中加载angularjs模块
- 从ASP MVC异步加载Angularjs(AJAX)并执行它们
- 如何在加载 AngularJS 元素后调用 JavaScript 函数
- Phantom 不会初始化/加载 Angularjs 控制器方法
- 加载 AngularJS 文件的正确顺序是什么
- 控制器的动态加载+angularjs中的工厂
- “间歇”;jqLite不支持通过选择器查找元素"当使用RequireJS加载AngularJS时
- 如何加载angularjs脚本文件
- 如何重命名或选择性加载angularJS
- 从html动态加载angularjs控制器
- 可以't加载AngularJS 2路由器
- 如何在不重新绘制绑定视图的情况下重新加载angularjs范围数据