0
私は剣道UIの角度グリッドを使用しています。親コントローラの関数を別のAngularディレクティブ（ハンドラとして）に基づくテンプレートに渡そうとしています。私は、サービスから剣道のグリッドオプションを取得するコントローラを備えたコンポーネントを持っています。ここ剣道グリッドコマンド親コントローラは指令ベースのテンプレートとして機能します
(function() {
'use strict';
angular.module('ins.admin.userreg')
.component('insUserRegGrid', {
templateUrl: 'admin/user-registration/grid/user-reg-grid.tpl.html',
controllerAs: 'vm',
controller: controller
});
controller.$inject = ['insUserRegGridSvc', 'insUserRegRouteSvc', '$timeout'];
function controller(insUserRegGridSvc, insUserRegRouteSvc, $timeout) {
var vm = this;
vm.options = insUserRegGridSvc.getOptions();
vm.goToCreate = insUserRegRouteSvc.goToCreate;
vm.onActiveChange = function(value) {
console.log('changed' + value);
}
}
})();
は（Activeのコマンドテンプレートが定義されている）、そのサービス内のオプションである：
(function() {
'use strict';
angular.module('ins.admin.userreg')
.factory('insUserRegGridSvc', insUserRegGridSvc);
insUserRegGridSvc.$inject = ['_', 'insUserRegResrc', 'insFormatUtil', 'insAppSettingsSvc'];
function insUserRegGridSvc(_, insUserRegResrc, insFormatUtil, insAppSettingsSvc) {
function getOptions() {
return {
dataSource: {
transport: {
read: function (e) {
insUserRegResrc.getUsersWithRoles().$promise.then(function (response) {
response.map(function (i) {
i.UserID = i.UserId;
i.Url = insAppSettingsSvc.apiRoot + 'UserRegistration/Post/' + i.UserId;
i.FirstName = i.FirstName;
i.MiddleName = i.MiddleName;
i.LastName = i.LastName;
if (i.Role[0]) {
i.RoleName = i.Role[0].RoleName;
} else {
i.RoleName = "";
}
if (i.Reports[0]) {
i.Manager = i.Reports[0].FullName;
} else {
i.Manager = "";
}
i.Email = i.Email;
i.Active = i.IsActive;
});
response = _.orderBy(response, ['UserId'], ['asc']);
e.success(response);
});
}
},
pageSize: 10
},
resizable: true,
pageable: true,
editable: false,
sortable: true,
toolbar: "<a ng-click='vm.goToCreate()' class='btn ins-btn-update k-grid-add pull-left' title='Add New'>add</a>",
columns: [
{ title: 'User Id', field: 'UserID', sortable: true, width: 150 },
{ title: 'First Name', field: 'FirstName', sortable: true, width: 150 },
{ title: 'Last Name', field: 'LastName', sortable: true, width: 150 },
{ title: 'Role', field: 'RoleName', sortable: true, width: 150 },
{ title: 'Manager', field: 'Manager', sortable: true, width: 150 },
{ title: 'Email', field: 'Email', sortable: true, width: 150 },
{
title: 'Active',
width: 85,
command: [
{
name: "Toggle Active",
template: "<ins-toggle ins-id='activeToggle' ins-model='dataItem.Active' ins-on-change='vm.onActiveChange' ins-on-text='yes' ins-off-text='no' ins-enabled='true'></ins-toggle>"
}
]
},
{
width: 85,
command: [
{ name: "Edit", template: "<a class='k-button k-button-icontext k-grid-edit' data-toggle='tooltip' ui-sref='.edit({ userId: {{dataItem.UserID}}})' title='#: name #'> <span class='k-icon k-edit'></span> </a>" }
]
}
]
}
}
return {
getOptions: getOptions
};
}
})();
上記コードから、以下に焦点を当てる：
{
title: 'Active',
width: 85,
command: [
{
name: "Toggle Active",
template: "<ins-toggle ins-id='activeToggle' ins-model='dataItem.Active' ins-on-change='vm.onActiveChange' ins-on-text='yes' ins-off-text='no' ins-enabled='true'></ins-toggle>"
}
]
},
としてスコープ属性として親コントローラのvm.onActiveChangeメソッドをins-toggleに渡そうとしているのがわかります。 ins-toggleのins-on-changeスコープ属性はinsOnChange: '&?'と設定され、剣道のグリッド外の他のシナリオでも機能します。
剣道は、親の機能をテンプレートの一部として指示文に渡すことはできませんか？