angularjs从$ scope之外访问ng-model [英] angularjs accessing ng-model from outside the $scope

问题描述

以下是我的代码：

 < div class =row> 
< div class =col-md-3 col-sm-4> 
  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> 
 < span class =glyphicon glyphicon-plus>< / span> {{'publications-addDomain'| translate}} 
< / button> 
< / div> 
< / div> 
  

在文件 directives.ts 中，I

  else if（if（else）ifs（if / else-ifs）通过一系列if / else-ifs来判断用户选择了什么： $ scope.type ==publicationCustomDomain）{
 var isUrl; 
 var custDomRegex = /^(?!http)(www\.)?(([az])+\.[az]{2,}(\.[az]{2，}） ？）/一世; 
 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（'输入自定义域名'）; 
 inputState.attr（'class'，'input-group-addon glyphicon glyphicon-ok input-state'）; 
 inform.animate（{top：'28px'}，'slow'）; 
 //这里我想从ng-model'addDomainBtn'
} 
   
 
 
很显然，如果（$ scope.type ==publicationCustomDomain）的计算结果为true，那么 > $ scope 这里是第一个嵌套div，并带有检查输入标记。我可以写什么，我已经注释掉访问第二个嵌套div内的按钮，以删除指定的类？
 
 
 
编辑：
 
 
 
控制器是这样定义的... 
  class mainPublicationsCtrl {
 private scope ： 任何; 
私人超时：任何; 
私人模态：任何; 
私人路线：任何; 
私人http：任何; 
私人mainScope：任何; 
 private selSiteServ：any; 
 static $ inject = ['$ scope']; 
 
构造函数（$ 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：
}; 
 ... 
  
 
 
解决方案
 ctrl ...默认为true  - > 
  isBtnClassDisabled = true; 
  
现在，您的html将如下所示：
 < div class =row> 
< div class =col-md-3 col-sm-4> 
  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> 
  ng-class =disabled-btn： isBtnClassDisabled> 
< span class =glyphicon glyphicon-plus>< / span> {{'publications-addDomain'| translate}} 
< / button> 
< / div> 
< / div> 
  
现在，您的directive.ts将如下所示：
  else if（$ scope.type ==publicationCustomDomain）{
 var isUrl; 
 var custDomRegex = /^(?!http)(www\.)?(([az])+\.[az]{2,}(\.[az]{2，}） ？）/一世; 
 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（'输入自定义域名'）; 
 inputState.attr（'class'，'input-group-addon glyphicon glyphicon-ok input-state'）; 
 inform.animate（{top：'28px'}，'slow'）; 
 
 $ 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屋！