私はAngularJsの最初のちょっとしたことを些細なことで構成しようとしていますが、残念ながらかなりの時間をかけて失敗しました。
私の前提:
ユーザーはドロップダウンからオプションの 1 つを選択し、適切なテンプレートを選択の下の div にロードします。サービス、カスタム ディレクティブをセットアップしました (この投稿の @Josh David Miller による ans に従い、コントローラーを配置しました。サーバーに渡すパラメーターがハードコーディングされていることを除いて、サービスの ajax 呼び出しは正常に機能しています。 . これをユーザーが選択したドロップダウンからの「キー」にしたい. 現時点では、このコードをサービスに渡すことができません。
私の構成:
var firstModule = angular.module('myNgApp', []);
// service that will request a server for a template
firstModule.factory( 'katTplLoadingService', function ($http) {
return function() {
$http.get("${createLink(controller:'kats', action:'loadBreedInfo')}", {params:{'b1'}}
).success(function(template, status, headers, config){
return template
})
};
});
firstModule.controller('KatController', function($scope, katTplLoadingService) {
$scope.breed = {code:''}
// here I am unsuccessfully trying to set the user selected code to a var in service,
//var objService = new katTplLoadingService();
//objService.breedCode({code: $scope.breed.code});
$scope.loadBreedData = function(){
$scope.template = katTplLoadingService();
}
});
firstModule.directive('showBreed', function ($compile) {
return {
scope: true,
link: function (scope, element, attrs) {
var el;
attrs.$observe( 'template', function (tpl) {
if (angular.isDefined(tpl)) {
el = $compile(tpl)(scope);
element.html("");
element.append(el);
}
});
}
};
})
HTMLのセットアップは
<form ng-controller="KatController">
<select name="catBreeds" from="${breedList}" ng-change="loadBreedData()"
ng-model="breed.code" />
<div>
<div show-breed template="{{template}}"></div>
</div>
</form>
$scope.breed.code の値にするには、$http ajax 呼び出しで現在ハードコードされている値 'b1' が必要です。