如何在 AngularJS 指令中传递变量值?
How To Pass variable Value in AngularJS Directive?
我在 AngularJS 中有一个指令,我在 html 页面中使用了该指令。该指令需要一个硬编码的参数
<md-button class="md-button md-raised md-theme-white list pull-right">
<i class="fa fa-pencil-square-o ng-scope" aria-hidden="true" select-organization-list="Advertiser" click-from="ClickFromSearch" onselect-Custom-Event="OpenModalOrganizationList(org, 'documentCompany')" ng-model='org'></i>
<md-tooltip md-direction="buttom">
Select Advertiser
</md-tooltip>
</md-button>
如何在该指令中传递变量 select-organization-list
。
我尝试通过在 angularJS vm.CompanyType = "Advertiser";
和 html 中定义变量 select-organization-list="vm.CompanyType"
它不起作用指令中的值变为 "vm.CompanyType" 不是 "Advertiser"?我该如何解决这个问题??
这是我的指令
.directive("selectOrganizationList",
function ($rootScope, $mdDialog, organizationService, $parse, $localStorage, sharedServices, organizationFactory) {
return {
restrict: "A",
scope: {
ngModel: "=?",
//isolatedExpression: '&'
onselectCustomEvent: "&"
},
template: "<div></div>",
// controller: "crudgridController as vm",
link: function (scope, element, $attrs) {
//var CompanyType = $attrs.selectOrganizationList || null;
$(element).on("click",
function (e) {
scope.OpenModalAddContract_OrganizationList = function (ev, valueFor) {
var mynewscope = $rootScope.$new();
scope.itemsOrganization = [];
var te = this;
te.Search = [];
te.Search.PageSize = 10;
te.Search.SearchClick = $attrs.clickFrom;
te.Search.MediaSearch = $attrs.clickFrom;
te.Search.Retired = false;
//////Swoyuj: When clicked from add/edit Contract Page, "PopupOrganization DivisionID" should be "Contract DivisionID"
//if ($attrs.clickFrom == "Contract") {
// te.Search.DivisionID = parseInt($attrs.divisionId);
// te.Search.DivisionIDList = [$attrs.divisionId];
//}
if ($attrs.selectOrganizationList == "AdAgency") {
te.Search.CompanyType = "AA";
}
if ($attrs.selectOrganizationList == "Advertiser") {
te.Search.CompanyTypeList = ['AA', 'AD']
}
if ($attrs.selectOrganizationList == "Billboard") {
te.Search.CompanyType = "BO";
}
if ($attrs.selectOrganizationList == "All") {
te.Search.CompanyType = "";
}
试试这个。
restrict: 'EA',
scope: {
CompanyType: '='
},
那么你应该可以在你的指令中通过 "scope.CompanyType" 访问你的变量。
<i class="fa fa-pencil-square-o ng-scope" aria-hidden="true" CompanyType="Advertiser" click-from="ClickFromSearch" onselect-Custom-Event="OpenModalOrganizationList(org, 'documentCompany')" ng-model='org'></i>
您也可以直接从 HTML 传递值。
<i class="fa fa-pencil-square-o ng-scope" aria-hidden="true" CompanyType="{{vm.companyType}}" click-from="ClickFromSearch" onselect-Custom-Event="OpenModalOrganizationList(org, 'documentCompany')" ng-model='org'></i>
我在 AngularJS 中有一个指令,我在 html 页面中使用了该指令。该指令需要一个硬编码的参数
<md-button class="md-button md-raised md-theme-white list pull-right">
<i class="fa fa-pencil-square-o ng-scope" aria-hidden="true" select-organization-list="Advertiser" click-from="ClickFromSearch" onselect-Custom-Event="OpenModalOrganizationList(org, 'documentCompany')" ng-model='org'></i>
<md-tooltip md-direction="buttom">
Select Advertiser
</md-tooltip>
</md-button>
如何在该指令中传递变量 select-organization-list
。
我尝试通过在 angularJS vm.CompanyType = "Advertiser";
和 html 中定义变量 select-organization-list="vm.CompanyType"
它不起作用指令中的值变为 "vm.CompanyType" 不是 "Advertiser"?我该如何解决这个问题??
这是我的指令
.directive("selectOrganizationList",
function ($rootScope, $mdDialog, organizationService, $parse, $localStorage, sharedServices, organizationFactory) {
return {
restrict: "A",
scope: {
ngModel: "=?",
//isolatedExpression: '&'
onselectCustomEvent: "&"
},
template: "<div></div>",
// controller: "crudgridController as vm",
link: function (scope, element, $attrs) {
//var CompanyType = $attrs.selectOrganizationList || null;
$(element).on("click",
function (e) {
scope.OpenModalAddContract_OrganizationList = function (ev, valueFor) {
var mynewscope = $rootScope.$new();
scope.itemsOrganization = [];
var te = this;
te.Search = [];
te.Search.PageSize = 10;
te.Search.SearchClick = $attrs.clickFrom;
te.Search.MediaSearch = $attrs.clickFrom;
te.Search.Retired = false;
//////Swoyuj: When clicked from add/edit Contract Page, "PopupOrganization DivisionID" should be "Contract DivisionID"
//if ($attrs.clickFrom == "Contract") {
// te.Search.DivisionID = parseInt($attrs.divisionId);
// te.Search.DivisionIDList = [$attrs.divisionId];
//}
if ($attrs.selectOrganizationList == "AdAgency") {
te.Search.CompanyType = "AA";
}
if ($attrs.selectOrganizationList == "Advertiser") {
te.Search.CompanyTypeList = ['AA', 'AD']
}
if ($attrs.selectOrganizationList == "Billboard") {
te.Search.CompanyType = "BO";
}
if ($attrs.selectOrganizationList == "All") {
te.Search.CompanyType = "";
}
试试这个。
restrict: 'EA',
scope: {
CompanyType: '='
},
那么你应该可以在你的指令中通过 "scope.CompanyType" 访问你的变量。
<i class="fa fa-pencil-square-o ng-scope" aria-hidden="true" CompanyType="Advertiser" click-from="ClickFromSearch" onselect-Custom-Event="OpenModalOrganizationList(org, 'documentCompany')" ng-model='org'></i>
您也可以直接从 HTML 传递值。
<i class="fa fa-pencil-square-o ng-scope" aria-hidden="true" CompanyType="{{vm.companyType}}" click-from="ClickFromSearch" onselect-Custom-Event="OpenModalOrganizationList(org, 'documentCompany')" ng-model='org'></i>