如何将范围变量从控制器传递到角度js中的指令

时间:2016-03-16 07:00:41

标签: angularjs

我有一个国家和州选择的依赖下拉。州下降取决于国家选择。实际上我在一个单独的文件模块中为它创建了一个指令。以下是这个。因此,当我进入编辑页面进行编辑时,则不会选择任何状态显示。 基本上我只想将所选国家从控制器传递到指令。如果我得到这个,那么我只需从指令加载相应的状态值。请帮助任何人。它的解决方案是什么? 在此先感谢:)

我的指示是:<​​/ h2>

function(window) {
    "use strict";
    var template = '<div class="control-group">'
    template += '<label for="country" class="control-label">{{countryLabel}}</label>';
	template += '<div class="controls" val="{{ngModel.country}}">';
    template += '<select name="country" ng-change="selectCountry()" ng-model="ngModel.country" required  class="form-control">';
	template += '<option value="">Select Country</option>';
    template +='<option ng-repeat="theCountry in countries track by $index" >{{theCountry}}</option>';
    template +='</select>';
    template +='</div>';
	template +='</div>';
	template += '<div class="control-group">';
	template += '<label for="country" class="control-label">{{stateLabel}}</label>';
	template += '<div class="controls">';
    template += '<select name="state" ng-model="ngModel.county" ng-disabled="!ngModel.country" required class="form-control">';
    template += '<option value="">Select State</option>';
    template +='<option ng-repeat="optStates in states track by $index">{{optStates}}</option>';
    template +='</select>';
    template +='</div>';
	template +='</div>';
    
    angular
        .module("angularCountryState")
        .directive("countryStateSelect", [ function () {
            return {
                restrict: "E",
                template: template,
                scope: { country: "=", countryState: "=?state", ngModel: '='},
                link: function (scope, element, attrs) {
                    scope.countryLabel = "Country";
                    scope.stateLabel = "State";						
                    if(typeof attrs.countryLabel != 'undefined'){
                        scope.countryLabel = attrs.countryLabel;
                    }
                    if(typeof attrs.stateLabel != 'undefined'){
                        scope.stateLabel = attrs.stateLabel;    
                    }
					
               alert(scope.country);
                    scope.countries = new Array("Afghanistan", "Albania", "Algeria", "American Samoa", "Angola", "Anguilla");

                    scope.state = new Array();
                    scope.state[1]="Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol";
                    scope.state[2]="Berat|Bulqize|Delvine|Devoll (Bilisht)|Diber (Peshkopi)|Durres|Elbasan|Fier|Gjirokaster|Gramsh|Has (Krume)|Kavaje|Kolonje (Erseke)|Korce|Kruje|Kucove|Kukes|Kurbin|Lezhe|Librazhd|Lushnje|Malesi e Madhe (Koplik)|Mallakaster (Ballsh)|Mat (Burrel)|Mirdite (Rreshen)|Peqin|Permet|Pogradec|Puke|Sarande|Shkoder|Skrapar (Corovode)|Tepelene|Tirane (Tirana)|Tirane (Tirana)|Tropoje (Bajram Curri)|Vlore";
                    scope.state[3]="Adrar|Ain Defla|Ain Temouchent|Alger|Annaba|Batna|Bechar|Bejaia|Biskra|Blida|Bordj Bou Arreridj|Bouira|Boumerdes|Chlef|Constantine|Djelfa|El Bayadh|El Oued|El Tarf|Ghardaia|Guelma|Illizi|Jijel|Khenchela|Laghouat|M'Sila|Mascara|Medea|Mila|Mostaganem|Naama|Oran|Ouargla|Oum el Bouaghi|Relizane|Saida|Setif|Sidi Bel Abbes|Skikda|Souk Ahras|Tamanghasset|Tebessa|Tiaret|Tindouf|Tipaza|Tissemsilt|Tizi Ouzou|Tlemcen";
                    scope.state[4]="Eastern|Manu'a|Rose Island|Swains Island|Western";
                    scope.state[5]="Andorra la Vella|Bengo|Benguela|Bie|Cabinda|Canillo|Cuando Cubango|Cuanza Norte|Cuanza Sul|Cunene|Encamp|Escaldes-Engordany|Huambo|Huila|La Massana|Luanda|Lunda Norte|Lunda Sul|Malanje|Moxico|Namibe|Ordino|Sant Julia de Loria|Uige|Zaire";
 
					
                    scope.selectCountry = function(){
						var selectedCountry = scope.ngModel.country;
                        var indexCountry = scope.countries.indexOf(selectedCountry)+1;
                        scope.states = scope.state[indexCountry].split("|");
						
                        scope.countryState = ''; 
                        if(scope.states.length == 1){
                            scope.states = new Array(selectedCountry);    
                        }
                        //indexCountry correspond to the "Select" label
                        if(indexCountry == 0){
                            scope.states = new Array("");
                        }
                    }
					// scope.selectCountry();
                }
            };
        }]);

}());

我的控制器是这个

app.controller('EmployeeloanCtrl', function ($scope, $rootScope, $routeParams, Restangular, showAlertSrvc, ngTableParams, $filter, listService, $location, $cookieStore){

  //This Function Is Use To Get The Detail Of The User Also Update The Detail.
	$scope.getUserDetail = function(){
		Restangular.one('users', uid).get({is_archived:'0'}).then(function(user){
			$scope.country = "india";
			$scope.user = user;
			//This Function Is Use To Update The User Personal Details.
			$scope.editUserinfo = function(user){
			  Restangular.one('users', uid).customPUT(user).then(function(responce){
				$location.path('/employee/loan/addloaninfo');
			  });
			};
		});
	};

});

这是我的HTML代码:

<form ng-submit="editAccount(user)" class="form-horizontal">
				<fieldset>
					<div class="control-group">											
						<label for="password" class="control-label">Password</label>
						<div class="controls">
							<span ng-controller="modalpchangeCtrl as ctrl">
								  <a class="btn btn-small btn-success" ng-click="ctrl.showModal(notification._id,'sender_id')">Change Password</a>
							</span>
						</div> <!-- /controls -->				
					</div> <!-- /control-group -->
					<div class="control-group">											
						<label for="first name" class="control-label">First Name</label>
						<div class="controls">
							<input type="text" class="span4" placeholder="First Name" ng-model="user.first_name" ng-required="true">
						</div> <!-- /controls -->				
					</div> <!-- /control-group -->
					<div class="control-group">											
						<label for="middle name" class="control-label">Middle Name</label>
						<div class="controls">
							<input type="text" class="span4" placeholder="Middle Name" ng-model="user.middle_name" ng-required="true">
						</div> <!-- /controls -->				
					</div> <!-- /control-group -->
					<div class="control-group">											
						<label for="last name" class="control-label">Last Name</label>
						<div class="controls">
							<input type="text" class="span4" placeholder="Last Name" ng-model="user.last_name" ng-required="true">
						</div> <!-- /controls -->				
					</div> <!-- /control-group -->
					<div class="control-group">											
						<label for="email" class="control-label">Email</label>
						<div class="controls">
							<input type="text" class="span4" ng-readonly="true" placeholder="Email" ng-model="user.email" ng-required="true">
						</div> <!-- /controls -->				
					</div> <!-- /control-group -->
					<div class="control-group">											
						<label for="phone" class="control-label">Address line 1</label>
						<div class="controls">
							<input type="text" class="span4" placeholder="address line 1" ng-model="user.address_line_1" ng-required="true">
						</div> <!-- /controls -->				
					</div> <!-- /control-group -->
					<div class="control-group">											
						<label for="phone" class="control-label">Address line 2</label>
						<div class="controls">
							<input type="text" class="span4" placeholder="address line 2" ng-model="user.address_line_2" ng-required="true">
						</div> <!-- /controls -->				
					</div> <!-- /control-group -->
                  
					<country-state-select ng-model="user"></country-state-select>
                  
					<div class="control-group">											
						<label for="city" class="control-label">City</label>
						<div class="controls">
						<input type="text" class="span4" placeholder="city" ng-model="user.city">	
						</div> <!-- /control-group -->
					</div>
					<div class="control-group">											
						<label for="post_code" class="control-label">Post code</label>
						<div class="controls">
							<input type="text" class="span4" placeholder="post code" ng-model="user.post_code" ng-required="true">
						</div> <!-- /controls -->				
					</div> <!-- /control-group -->
					<div class="control-group">				
					<div class="form-actions">
						<button class="btn btn-primary" type="submit">Save</button>
						<a class="btn" href="/#/">Cancel</a>
					</div> <!-- /form-actions -->
				</fieldset>
			</form>

我尝试了Suggetion:

I want the controller data in alert

我也看起来是一个吸引人的链接http://plnkr.co/edit/gp0zIwnj9Oz3IpQPXhDI?p=preview。 我只想要从控制器设置的数据我希望得到警报。

0 个答案:

没有答案