angularjs accessing ng-model from outside the $sco

问题:

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: ""
        };
        ...

回答1:

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;
      }