javascript - 范围函数在 angularjs 中不起作用

Question

我试图调用 Controller 中定义的函数，但由于一些愚蠢的错误，它没有调用，这是我的代码。它应该提醒 getCustomerID 函数中定义的 1。范围变量设置正确，如 this.title

HTML

 <ons-template id="home.html">
      <ons-page ng-controller="Home as page">
        <ons-toolbar>
          <div class="left">
            <ons-toolbar-button onclick="fn.open()">
              <ons-icon icon="md-menu"></ons-icon>
            </ons-toolbar-button>
          </div>
          <div class="center">
            {{page.title}}
          </div>
        </ons-toolbar>
        <p style="text-align: center;  padding-top: 20px;">
        Choose Client : 
        <select ng-model="filterCondition.operator" ng-change="getCustomerID()">
            <option  ng-repeat="x in customers" value="{{x.id}}">{{x.name}}</option>
        </select>
        <ons-button ng-click="page.getCustomerID()">Call</ons-button>
        </p>            

        <div id="map"></div>

        <br/>
        <ons-button modifier="large" onclick="mylocation()">My Location</ons-button>
      </ons-page>
    </ons-template>

JS

    app.controller('Home', function($scope){
    $scope.page = {
        title : "CRGroup",
        name : localStorage.getItem("name"),
        email : localStorage.getItem("email"),
        profilepic : localStorage.getItem("profilepic"),
    }  

    $scope.filterCondition={
        operator: '1'
    }

    $.ajax({
        type: 'GET',
        url: 'http://XXXXX.php',        
        async: false,
        data: {},
        success: function (response) {                      
            $scope.customers = response;            
        },
        error: function (response) {
            $scope.error = true;
            $scope.$apply();
        }
    });

    $scope.page.getCustomerID = function() {
        alert(1);
    }   
});

Answer 1

您仍在混合controller as 和$scope。如果您打算使用controller as，我建议您从 Controller 中删除所有$scope内容。以下是您可以如何使用 controller as 语法来重组您的内容。 我不知道您的 onclick 函数在哪里，也不知道您为什么使用 onclick 而不是 ng-click 所以我将它们保留为是。

HTML

<ons-template id="home.html">
    <ons-page ng-controller="Home as page">
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="fn.open()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">
                {{page.title}}
            </div>
        </ons-toolbar>
        <p style="text-align: center;  padding-top: 20px;">
            Choose Client : 
            <select ng-model="page.filterCondition.operator" ng-change="page.getCustomerID()">
                <option ng-repeat="x in page.customers" value="{{x.id}}">{{x.name}}</option>
            </select>
            <ons-button ng-click="page.getCustomerID()">Call</ons-button>
        </p>            
        <div id="map"></div>
        <br/>
        <ons-button modifier="large" onclick="mylocation()">My Location</ons-button>
    </ons-page>
</ons-template>

Controller :

app.controller('Home', function($http) {
    var _this = this;
    _this.title = "xxxx";
    _this.name = localStorage.getItem("name");
    _this.email = localStorage.getItem("email");
    _this.profilepic = localStorage.getItem("profilepic"); 
    _this.filterCondition = {
        operator: '1'
    };
    $http.get('http://xxxx.php')
        .then(function(response) {
            _this.customers = response.Data; 
           // I use Typescript and put my web service calls in a service 
           // so I can never remember if you need to use response.Data here,
           // but I think you do
        })
        .catch(function(error) {
            _this.error = true;
        });
    _this.getCustomerID = function() {
        alert(1);
    }   
});