javascript - angularjs 从 $scope 之外访问 ng-model

Question

这是我的代码:

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

在文件 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;
      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'
      }

显然 if($scope.type == "publicationCustomDomain") 的计算结果为真，这里的 $scope 位于第一个嵌套的 div 中，checked-input 标签。我可以在我注释掉的行中写什么来访问第二个嵌套 div 中的按钮以删除指定的类？

编辑:

Controller 是这样定义的...

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

Answer 1

在 ctrl 中创建新属性...默认为 true ->

 isBtnClassDisabled = true;

现在在您的 html 中将如下所示:

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

现在，您的 directive.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;
      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;
      }