Question

我正在尝试调用控制器中定义的函数，但由于一些愚蠢的错误，它不会调用，这是我的代码。它应该警告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，我建议您从控制器中删除所有$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>

控制器：

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

Answer 2

当您使用控制器语法as时，您必须使用this而不是$scope来定义您的功能

如果您将$scope.getCustomerID = function...更改为this.getCustomerID = function...

同样适用于您的其他功能。

另请注意，您将x in customers部分出现问题以及需要执行x in page.customers，并且在控制器中您需要执行this.customers但是如果您定义它在子功能中也不会起作用，除非你确保你提升上下文。

Answer 3

检查更改：

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

  }  

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

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

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

尝试使用angular提供的$ http服务，而不是使用ajax调用。这样，我认为你也可以消除$ scope。$ apply（）。仅供参考，使用$ scope。$ apply不是一个好习惯。并尝试保持角度，而不是使用jquery或vanilla js方法。

范围功能在angularjs中不起作用

3 个答案: