angularjs 从 $scope 外部访问 ng-model
[英] angularjs accessing ng-model from outside the $scope
本文介绍了angularjs 从 $scope 外部访问 ng-model的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的代码:
<div class="col-md-3 col-sm-4"><检查输入pholder="{{'publications-customDomain' | 翻译}}"类=添加发布者输入"ng-model="customDomain"图标 =字形地球仪"类型 =publicationCustomDomain"页=出版物"></checked-input>
<div class="col-md-3 col-sm-4"><button class="add-domain btn btn-primary disabled-btn" ng-model="addDomainBtn" ng-click="vm.addUserPublisher(currentTab)"><span class="glyphicon glyphicon-plus"></span>{{'publications-addDomain' |翻译}}
在文件 directives.ts 中，我有一个结构，通过一堆 if/else-ifs 来确定用户选择了什么:
else if($scope.type == "publicationCustomDomain") {var isUrl;var custDomRegex =/^(?!http)(www\.)?(([a-z])+\.[a-z]{2,}(\.[a-z]{2,})?)/i;var isCustDom;var custDomName = e.target.value;如果(custDomName.match(custDomRegex)){isCustDom = true;} 别的 {isCustDom = false;}如果(isCustDom){inform.attr('class', 'input-inform state-normal');inform.html('输入自定义域名');inputState.attr('class', 'input-group-addon glyphicon glyphicon-ok input-state');通知.动画({顶部:'28px'}，'慢')；//这里我想用 ng-model 'addDomainBtn' 从按钮中删除类 'disabled-btn'}
显然，当 if($scope.type == "publicationCustomDomain") 评估为真时，这里的 $scope 位于第一个嵌套 div 中，<代码>检查输入标签.我可以在注释掉的行中写什么来访问第二个嵌套 div 中的按钮以删除指定的类?
控制器是这样定义的...
class mainPublicationsCtrl {私有范围:任何；私人超时:任何；私人模式:任何；私人路线:任何；私人 http: 任何;私有主作用域:任意；私人 selSiteServ: 任何;静态 $inject = ['$scope'];构造函数($scope，$timeout，$http，$modal，$route，selSiteServ){$scope.vm = 这个；$scope.isBtnClassDisabled = true;$scope.selectedItem = 0;$scope.countOfTabs = 1;$scope.activeTab = {数量:0};$scope.publisherAddText = {文本: ""};...
解决方案
在 ctrl 中创建新属性... 默认为 true ->
isBtnClassDisabled = true;
现在在您的 html 中将如下所示:
<div class="col-md-3 col-sm-4"><检查输入pholder="{{'publications-customDomain' | 翻译}}"类=添加发布者输入"ng-model="customDomain"图标 =字形地球仪"类型 =publicationCustomDomain"页=出版物"buttonClass="isBtnClassDisabled"></checked-input>
<div class="col-md-3 col-sm-4"><button class="add-domain btn btn-primary" ng-model="addDomainBtn" ng-click="vm.addUserPublisher(currentTab)"ng-class="disabled-btn : isBtnClassDisabled"><span class="glyphicon glyphicon-plus"></span>{{'publications-addDomain' |翻译}}
现在，你的指令.ts 将是这样的:
else if($scope.type == "publicationCustomDomain") {var isUrl;var custDomRegex =/^(?!http)(www\.)?(([a-z])+\.[a-z]{2,}(\.[a-z]{2,})?)/i;var isCustDom;var custDomName = e.target.value;如果(custDomName.match(custDomRegex)){isCustDom = true;} 别的 {isCustDom = false;}如果(isCustDom){inform.attr('class', 'input-inform state-normal');inform.html('输入自定义域名');inputState.attr('class', 'input-group-addon glyphicon glyphicon-ok input-state');通知.动画({顶部:'28px'}，'慢')；$scope.isBtnClassDisabled = false;}
Here is my code:
<div class="row">
<div class="col-md-3 col-sm-4">
<checked-input
pholder="{{'publications-customDomain' | translate}}"
class="add-publisher-input"
ng-model="customDomain"
icon="glyphicon-globe"
type="publicationCustomDomain"
page="publications">
</checked-input>
</div>
<div class="col-md-3 col-sm-4">
<button class="add-domain btn btn-primary disabled-btn" ng-model="addDomainBtn" ng-click="vm.addUserPublisher(currentTab)">
<span class="glyphicon glyphicon-plus"></span>{{'publications-addDomain' | translate}}
</button>
</div>
</div>
Inside a file directives.ts, I have a structure that goes through a bunch of if/else-ifs to figure out what the user has selected:
else if($scope.type == "publicationCustomDomain") {
var isUrl;
var custDomRegex = /^(?!http)(www\.)?(([a-z])+\.[a-z]{2,}(\.[a-z]{2,})?)/i;
var isCustDom;
var custDomName = e.target.value;
if (custDomName.match(custDomRegex)) {
isCustDom = true;
} else {
isCustDom = false;
}
if(isCustDom) {
inform.attr('class', 'input-inform state-normal');
inform.html('Enter custom domain name');
inputState.attr('class', 'input-group-addon glyphicon glyphicon-ok input-state');
inform.animate({top: '28px'}, 'slow');
//HERE I WANT TO REMOVE THE CLASS 'disabled-btn' FROM THE BUTTON WITH ng-model 'addDomainBtn'
}
Obviously as the if($scope.type == "publicationCustomDomain") evaluates as true, the $scope here is inside the first nested div, with the checked-input tag. What can I write in the line I have commented out to access the button inside the second nested div to remove the class specified?
EDIT:
The controller is defined like so...
class mainPublicationsCtrl {
private scope: any;
private timeout: any;
private modal: any;
private route: any;
private http: any;
private mainScope: any;
private selSiteServ: any;
static $inject = ['$scope'];
constructor($scope, $timeout, $http, $modal, $route, selSiteServ) {
$scope.vm = this;
$scope.isBtnClassDisabled = true;
$scope.selectedItem = 0;
$scope.countOfTabs = 1;
$scope.activeTab = {
num: 0
};
$scope.publisherAddText = {
text: ""
};
...
解决方案
Create new property in the ctrl... Default it to true ->
isBtnClassDisabled = true;
Now in your html will look like this:
<div class="row">
<div class="col-md-3 col-sm-4">
<checked-input
pholder="{{'publications-customDomain' | translate}}"
class="add-publisher-input"
ng-model="customDomain"
icon="glyphicon-globe"
type="publicationCustomDomain"
page="publications"
buttonClass="isBtnClassDisabled">
</checked-input>
</div>
<div class="col-md-3 col-sm-4">
<button class="add-domain btn btn-primary " ng-model="addDomainBtn" ng-click="vm.addUserPublisher(currentTab)"
ng-class="disabled-btn : isBtnClassDisabled ">
<span class="glyphicon glyphicon-plus"></span>{{'publications-addDomain' | translate}}
</button>
</div>
</div>
And now, your directive.ts will be like this:
else if($scope.type == "publicationCustomDomain") {
var isUrl;
var custDomRegex = /^(?!http)(www\.)?(([a-z])+\.[a-z]{2,}(\.[a-z]{2,})?)/i;
var isCustDom;
var custDomName = e.target.value;
if (custDomName.match(custDomRegex)) {
isCustDom = true;
} else {
isCustDom = false;
}
if(isCustDom) {
inform.attr('class', 'input-inform state-normal');
inform.html('Enter custom domain name');
inputState.attr('class', 'input-group-addon glyphicon glyphicon-ok input-state');
inform.animate({top: '28px'}, 'slow');
$scope.isBtnClassDisabled = false;
}
这篇关于angularjs 从 $scope 外部访问 ng-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
