从AngularJS 1.5中的子指令访问父指令控制器
我试图从子指令访问父指令的控制器,但到目前为止没有成功 我有这样的上级指令:从AngularJS 1.5中的子指令访问父指令控制器,angularjs,controller,directive,Angularjs,Controller,Directive,我试图从子指令访问父指令的控制器,但到目前为止没有成功 我有这样的上级指令: (function() { 'use strict'; angular .module('app.mybusiness.shared') .directive('pkPage', pkPage); /* @ngInject */ function pkPage() { var directive = { rest
(function() {
'use strict';
angular
.module('app.mybusiness.shared')
.directive('pkPage', pkPage);
/* @ngInject */
function pkPage() {
var directive = {
restrict: 'E',
scope: true,
controller: 'PkpageController',
controllerAs: 'pageCtrl',
templateUrl: 'app/mybusiness/shared/pkpage/pkpage.tmpl.html'
};
return directive;
}
})();
(function() {
'use strict';
angular
.module('app.mybusiness.shared.pkpage')
.controller('PkpageController', Controller);
/* @ngInject */
function Controller($filter, API, ToastService) {
var vm = this;
vm.$filter = $filter;
vm.API = API;
vm.ToastService = ToastService;
vm.clickedRow = null;
vm.reset = function() {
vm.pkForm.$setPristine();
vm.pkForm.$setUntouched();
vm.title = vm.addTitle;
};
vm.setContent = function(content) {
vm.content = content;
console.log(vm.content);
};
vm.save = function() {
if (vm.clickedRow === null) {
vm.promise = vm.API.all(vm.resource).post(vm.content);
vm.promise.then(function () {
vm.ToastService.show(vm.$filter('translate')(vm.addMsg));
vm.refresh();
})
}
else {
vm.promise = vm.content.put();
vm.promise.then(function () {
vm.ToastService.show(vm.$filter('translate')(vm.updMsg));
vm.refresh();
})
}
};
vm.refresh = function() {
vm.promise = vm.API.all(vm.resource).getList();
vm.promise.then(function (response) {
vm.contents = response;
})
vm.reset();
};
vm.destroy = function() {
vm.promise = vm.content.remove();
vm.promise.then(function () {
vm.ToastService.show(vm.$filter('translate')(vm.delMsg));
vm.refresh();
})
};
}
})();
这是父指令的控制器:
(function() {
'use strict';
angular
.module('app.mybusiness.shared')
.directive('pkPage', pkPage);
/* @ngInject */
function pkPage() {
var directive = {
restrict: 'E',
scope: true,
controller: 'PkpageController',
controllerAs: 'pageCtrl',
templateUrl: 'app/mybusiness/shared/pkpage/pkpage.tmpl.html'
};
return directive;
}
})();
(function() {
'use strict';
angular
.module('app.mybusiness.shared.pkpage')
.controller('PkpageController', Controller);
/* @ngInject */
function Controller($filter, API, ToastService) {
var vm = this;
vm.$filter = $filter;
vm.API = API;
vm.ToastService = ToastService;
vm.clickedRow = null;
vm.reset = function() {
vm.pkForm.$setPristine();
vm.pkForm.$setUntouched();
vm.title = vm.addTitle;
};
vm.setContent = function(content) {
vm.content = content;
console.log(vm.content);
};
vm.save = function() {
if (vm.clickedRow === null) {
vm.promise = vm.API.all(vm.resource).post(vm.content);
vm.promise.then(function () {
vm.ToastService.show(vm.$filter('translate')(vm.addMsg));
vm.refresh();
})
}
else {
vm.promise = vm.content.put();
vm.promise.then(function () {
vm.ToastService.show(vm.$filter('translate')(vm.updMsg));
vm.refresh();
})
}
};
vm.refresh = function() {
vm.promise = vm.API.all(vm.resource).getList();
vm.promise.then(function (response) {
vm.contents = response;
})
vm.reset();
};
vm.destroy = function() {
vm.promise = vm.content.remove();
vm.promise.then(function () {
vm.ToastService.show(vm.$filter('translate')(vm.delMsg));
vm.refresh();
})
};
}
})();
父指令模板:
<md-content class="padding-normal">
<div ng-hide="vm.contents.length === 0">
<p class="md-headline" translate>{{vm.tableTitle}}</p>
<pk-table
columns = "vm.columns"
contents = "vm.contents"
page-size = "10"
on-unselection = "vm.reset()"
on-selection = "vm.setContent(selectedContent)"
>
</pk-table>
</div>
<p class="md-headline padding-top-10 padding-bottom-10" translate>{{vm.title = vm.selectedRow ? vm.editTitle : vm.addTitle}}</p>
<pk-form
input-content = "vm.content"
on-update = "vm.save(newContent)"
on-delete = "vm.destroy(content)"
template-url = "ex-puoliso">
</pk-form>
</md-content>
如果单击未选中的tablerow,onRowClick函数将运行onSelection函数,它是子指令范围绑定和属性之一。在父指令模板中,onSelection属性设置为运行父指令(pkPage)控制器的vm.setContent()函数
但单击tablerow时,浏览器控制台中没有输出(vm.content或errors)。在我看来,vm.setContent()函数根本不会启动。你知道我错过了什么吗
但是:
如果我将vm.setContent()函数移动到ui路由器状态控制器,函数将按预期在tablerow上开始运行单击
这是我的ui路由器状态配置:
(function() {
'use strict';
angular
.module('app.mybusiness.customer-forms.permium')
.config(moduleConfig);
/* @ngInject */
function moduleConfig($translatePartialLoaderProvider, $stateProvider) {
$translatePartialLoaderProvider.addPart('app/mybusiness/customer-forms');
$stateProvider
.state('triangular.customer', {
url: '/premiums',
views: {
'': {
resolve: { /* @ngInject */
contents: function (API) {
return API.all('customer/premiums').getList();
}
},
template: '<pk-page></pk-page>',
controller: 'premiumController',
controllerAs: 'vm'
}
}
});
}
})();
(函数(){
"严格使用",;
有棱角的
.module('app.mybusiness.customer forms.permium')
.config(moduleConfig);
/*@ngInject*/
函数模块配置($TranslatePartialLoadProvider,$stateProvider){
$translatePartialLoadProvider.addPart('app/mybusiness/customer表单');
$stateProvider
.state('triangular.customer'{
url:“/Premium”,
观点:{
'': {
解析:{/*@ngInject*/
内容:函数(API){
返回API.all('customer/premium').getList();
}
},
模板:“”,
控制器:“premiumController”,
controllerAs:'vm'
}
}
});
}
})();
在PermisumController中,我拥有各个案例的所有业务数据,并且这些数据对于子指令是可以访问的,没有问题。但我不想把所有的父指令函数移到business controller,因为它是干的
希望你能掌握我的情况
角度1.5.5
角度用户界面路由器0.3.1