Winkelmodul und Controller Dateien scheinen nicht

Question

Ich habe folgende Angular Erklärungen zu laufen, und erhalten keine Beschwerden über JS Syntaxfehler oder ähnliches:

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

Dann habe ich einen Repeater mit Optionen erklärt wie:

<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 wird nicht aufgerufen, wenn ich die Auswahloption und die Haltepunkte ändere, die ich in den Chrome-Debugger einfüge, auch auf Zeilen, die nicht in Funktionen sind. $scope.areas.getOptions(1);, die für die Initialisierung eines Dropdown ist, ist nicht in einer Funktion, sondern unterhalb der Deklaration der Funktion, also möchte ich die Funktion deklarieren und dann sofort danach aufrufen. Ein Breakpoint in der Moduldatei, auf var hookPointApp = angular.module("hookPointApp", []); funktioniert nicht einmal, aber einige Angular-Funktionalität in der App funktioniert manchmal noch.

Die Angular (Kern und meine eigenen Dateien) sind, glaube ich, richtig an der Unterseite des in Layout.cshtmlbody Element verwiesen:

@Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    <script src="~/Scripts/angular/angular.js"></script> 
    <script src="~/Scripts/angular/angular-resource.min.js"></script> 
    <script src="~/Scripts/App/App.js"></script> 
    <script src="~/Scripts/App/suburbsCtrl.js"></script> 
    @RenderSection("ViewScripts", required: false) 
</body> 

Was könnte ich falsch gemacht?

Answer 1

Zuerst Stattdessen Ihr Modul über eine Variable zu referenzieren, können Sie verwenden, um die getter Syntax für das Modul. Ich würde auch die Moduldeklaration und die c-Controllerdefinition in eine separate Datei aufteilen. Dies steht im Einklang mit John Papa Angular Style Guide vom Angular Team unterstützt:

App.js

(function() { 
'use strict'; 

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

agentCtrl.js

(function() { 
'use strict'; 


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

Zweitens, werden Sie wahrscheinlich $http Service von Angular oder einem anderen Bibliothek für $http Anfragen verwendet werden sollen zB Restangular. Das Problem, das Sie haben, ist, weil Sie wahrscheinlich jQuery's AJAX-Methode verwenden, die bei Abschluss keine Möglichkeit hat, die eckige Digest-Schleife wissen zu lassen, dass eine Antwort vom Server vorliegt, es sei denn, Sie benachrichtigen es über $scope.apply().

Beachten Sie, dass in der Promise Auflösung wir die then Methode des promise und nicht success verwenden, die veraltet ist. Read more here über $http und die Notice Notice.

Hier ist suburbsCtrl.js mit dem $http Service.

(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- Die Angular Dokumentation fördert Angular's Dienste und verwenden nur jQuery's Methoden, wenn sie nicht zur Verfügung. Ich würde empfehlen, Angular ohne externe jQuery Abhängigkeit zu verwenden und die eingebaute jqLite in Angular für die Methoden zu verwenden, die Sie jQuery für verwenden würden.

Schauen Sie auch in diesen Ressourcen:

https://docs.angularjs.org/guide

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

Answer 2

getOptions() ist nicht definiert.

definieren:

(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", []) (add Halterung)
• Verwendung Winkel http ersetzen jquery ajax, weil einige Zeit nicht in der Lage Update dom.

Probieren Sie es aus:

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