javascript - Angular javascript ng模型不起作用

Question

这是我的项目的一个小节:

<div class="col-md-3 col-sm-4">
    <checked-input
     pholder="{{'publications-customDomain' | translate}}"
     class="add-publisher-input"
     ng-model="customDomain.text"
     icon="glyphicon-globe"
     type="publicationCustomDomain"
     page="publications">
    </checked-input>
</div>
<div class="col-md-3 col-sm-4">
    <button ng-if="isBtnClassDisabled===false" class="add-domain btn btn-primary" ng-click="vm.addUserPublisher(currentTab)">
        <span class="glyphicon glyphicon-plus"></span>{{'publications-addDomain' | translate}}
    </button>
</div>

它的工作方式是，checked-input验证输入的任何内容以确保它是一个 URL，一旦验证通过，isBtnClassDisabled变为 false，以便出现第二个 div 中的按钮，您可以单击它。这调用函数 vm.addUserPublisher , 但是，当我尝试记录 this.scope.customDomain (ng-model 的 checked-input )从 Controller ，控制台返回 undefined .谁能解释为什么？谢谢。

编辑 1 - 我的 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.customDomain = {
            text: ""
        }
        this.scope = $scope;
        ...
        addUserPublisher(tab: any) {
            console.log(this.scope.customDomain.text);
        }
        ...
 }

编辑 2 - <checked-input>指令定义如下:

模板:

<div>
  <div class="input-info-wrap">
    <div class="input-inform state-normal"></div>
  </div>
  <div class="input-group">
    <span ng-if="icon != '' && !isFaIcon"
          class="input-group-addon glyphicon {{icon}} icon-inline btn-item">
    </span>
    <span ng-if="icon != '' && isFaIcon"
          class="input-group-addon fa {{icon}} fa-input-label-size icon-inline btn-item">
    </span>
    <input type="text" 
           class="form-control btn-item form-tab-input" 
           placeholder="{{pholder}}"
           ng-model="model"
           maxlength="20">
    <span class="input-group-addon glyphicon glyphicon-asterisk input-state"></span>
  </div>
</div>

Java脚本:

class checkedInput implements ng.IDirective {
  public link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
  public templateUrl = 'partials/directives/checked-input.html';
  public scope = { 
    model: "=",
    icon: "@",
    pholder: "@",
    type: "@",
    page: "@",
    num: "@",
    gstab: "=",
    gsrow: "=",
    tab: "=",
    isFaIcon: "="
  };
}

Answer 1

尝试为 checked-input 指令使用模板。在指令的模板中定义 ng-model，而不是在 HTML 中显式定义。