角模塊和控制器的文件似乎並沒有運行

Question

我有以下的角的聲明，並沒有得到關於JS語法錯誤或任何類似的投訴：

App.js：

(function() { 
    'use strict'; 

    var hookPointApp = angular.module("hookPointApp", []); 
    hookPointApp.controller("agentCtrl", function ($scope, $http) { 
     $scope.model = {}; 
     ... 
    }); 
})(); 

suburbsCtrl：

(function() { 
    'use strict'; 

    angular.module("hookPointApp").controller('suburbsCtrl', function ($scope, $http) { 
     $scope.areas.url = "/Area/ProvinceAreas"; 
     $scope.areas.getOptions = function (provinceId) { 
      var area = "{'provinceId': '" + provinceId + "'}"; 
      $.ajax({ 
       url: $scope.areas.url, 
       type: "POST", 
       data: area, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       async: false, 
       cache: false, 
       success: function (response) { 
        if ((response !== null) && (typeof response !== "undefined")) { 
         $scope.areas.options = response; 
        } 
       }, 
       error: function (xmlHttp, textStatus, errorThrown) { 
        alert(errorThrown); 
       } 
      }); 
     }; 
     // TODO Get a proper provinceId somehow. 
     $scope.areas.getOptions(1); 
     ... 
    }); 
})(); 

然後我宣佈就像選擇一箇中繼器：

<div ng-controller="suburbsCtrl"> 
    <div class="form-group"> 
     @Html.LabelFor(model => model.AreaId, new { @class = "control-label" }) 
     <select class="form-control" ng-model="areas.areaId" ng-change='areas.getOptions($("#province.val()"))'> 
      <option> - Select an Area - </option> 
      <option id="province" ng-repeat="item in areas.options" ng-value="{{item.Id}}">{{item.Label}}</option> 
     </select> 
    </div> 
</div> 

還有getOptions在我改變選擇選項時並沒有被調用，並且我放入了Chrome調試器的斷點，即使在不在函數中的行上，執行也沒有停止在那裏。 $scope.areas.getOptions(1);用於初始化下拉菜單，不在函數中，但在函數聲明下面，所以我想聲明該函數，然後立即調用它。模塊文件中的斷點var hookPointApp = angular.module("hookPointApp", []);甚至不起作用，但應用程序中的某些Angular功能有時仍然有效。

的角度（核心和我自己的）文件是，我認爲，在body元素的底部Layout.cshtml正確引用：

​​

什麼可能我是做錯了什麼？

Answer 1

第一，而不是通過一個變量引用你的模塊，你可以使用getter語法模塊。我也會將模塊聲明和c控制器定義分割成單獨的文件。這是符合由Angular隊贊同約翰爸爸的Angular Style Guide：

App.js

(function() { 
'use strict'; 

angular.module("hookPointApp", []);  
})(); 

agentCtrl.js

(function() { 
'use strict'; 


angular.module("hookPointApp").controller("agentCtrl", function ($scope, $http) { 
    $scope.model = {}; 
    }); 
})(); 

其次，你應該使用的Angular$http服務或$http請求另一個庫例如Restangular。您的問題是因爲您可能正在使用ajax方法，在完成後無法讓角度摘要循環知道服務器有響應，除非您通過$scope.apply()通知它。

注意的是，在Promise分辨率，我們使用的promise而不是success已經過時了then方法。 Read more here約$http和棄用通知。

這裏是suburbsCtrl.js與$http服務。

(function() { 
'use strict'; 

angular.module("hookPointApp").controller('suburbsCtrl', function ($scope, $http) { 
    $scope.areas.url = "/Area/ProvinceAreas"; 
    $scope.areas.url = "/Area/ProvinceAreas"; 
$scope.areas.getOptions = function (provinceId) { 
    $http.post($scope.areas.url, { 
     provinceId: provinceId 
    }).then(function(data){ 
     if (data) { 
      $scope.areas.options = data; 
     } 
    }).catch(function(err){ 
     console.error(err); 
    }); 
}; 
    // TODO Get a proper provinceId somehow. 
    $scope.areas.getOptions(1); 

}); 
})(); 

PS-的Angular文檔鼓勵使用Angular's服務，僅用時不可用jQuery's方法。我建議嘗試使用Angular而不依賴外部jQuery，並使用內置jqLite的Angular來使用那些您將使用jQuery的方法。

而且看看這些資源：

https://docs.angularjs.org/guide

"Thinking in AngularJS" if I have a jQuery background?

Answer 2

getOptions（）未定義。

定義：

(function() { 
    'use strict'; 

    angular.module("hookPointApp").controller('suburbsCtrl', function ($scope, $http) { 
    ... 
    // TODO Get a proper provinceId somehow. 
    $scope.areas.getOptions(1); 
    ... 
    $scope.getOptions = function() { 
     // on change select , call this 
    }; 
}); 
})(); 

Answer 3

• angular.module（ 「hookPointApp」，[]）（添加括號）
• 使用角HTTP取代AJAX jquery的，因爲一些時間無法更新DOM。

試試：

(function() { 
'use strict'; 

angular.module("hookPointApp", []).controller('suburbsCtrl', function ($scope, $http) { 
    $scope.areas.url = "/Area/ProvinceAreas"; 
    $scope.areas.getOptions = function (provinceId) { 
     $http.post($scope.areas.url, { 
      provinceId: provinceId 
     }).success(function(data){ 
      if (data) { 
       $scope.areas.options = data; 
      } 
     }); 
    }; 
    // TODO Get a proper provinceId somehow. 
    $scope.areas.getOptions(1); 
    ... 
}); 
})();