作用域函數在angularjs中不起作用

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建議從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...更改$scope.getCustomerID = function... this.getCustomerID = function...

其他功能也一樣。

還要注意，您將x in customers部分x in page.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方法。