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中的按钮以删除指定的类？

编辑：

控制器定义如此......

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 - ＆gt;

 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>

现在，你的指令就像这样：

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

1 个答案: