角度javascript ng-model不工作

Here is a subsection of my project:

这是我项目的一个小节:

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

The way this works is, the checked-input validates whatever is typed in to ensure that it is a URL, and once it is validated, isBtnClassDisabled becomes false, so that the button in the second div appears, and you are able to click it. This calls the function vm.addUserPublisher, however, when I try to log this.scope.customDomain (the ng-model of the checked-input) from the controller, the console returns undefined. Can anyone explain why? Thanks.

这样做的方式是,checked-input验证输入的内容以确保它是一个URL,并且一旦验证,isBtnClassDisabled变为false,以便第二个div中的按钮出现,并且您可以单击它。这会调用函数vm.addUserPublisher,但是,当我尝试从控制器记录this.scope.customDomain(checked-input的ng-model)时,控制台将返回undefined。有人可以解释为什么吗谢谢。

Edit 1 - My controller looks as follows:

编辑1 - 我的控制器如下所示:

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

Edit 2 - The <checked-input> directive is defined as follows:

编辑2 - 指令定义如下:

Template:

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

Javacript:

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

1 个解决方案

#1

Try using a template for the checked-input directive. Define the ng-model within the directive's template instead of explicitly on the HTML.

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