将表单加载到单页面app中的指令丢失了控制器绑定

时间:2016-08-19 04:29:20

标签: binding controller directive

我正在使用AngularJS创建单页应用。我创建了一个主页面,其中包含用于加载表单URL的自定义指令。我想根据控制器中的变量更改表单。但是,一旦我编译并链接了URL

中的表单,我就失去了绑定



<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="tradesman"  ng-controller="application" class="form-horizontal" role="form">
Hello {{applicant.name}}
<my-form name="formName">

</my-form>
</div>
&#13;
&#13;
&#13;

&#13;
&#13;
var tradesman = angular.module("tradesman")

tradesman.controller("application",function application($scope){
	$scope.formName="personals";
	$scope.applicant={};
	});

tradesman.directive("myForm",function($http,$compile){
		return {
			restrict:"E",
			scope:false,
			replace:true,
			
			link:function(scope,element,attrs){
				var url="http://tradesman.local/views/"+scope.formName+".html";
				$http.get(url).then(function(response){
					scope.$watch(function(){
						element.html(response.data);
						$compile(element.contents())(scope);
						});
				});
				
				
			}
		};
	});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
&#13;
&#13;
&#13;

这已成功加载我的个人页面,但在该页面中丢失了绑定。此外,每当我在控制器中更改formName时,我都希望加载一个新表单。

需要做什么才能使表单加载和绑定同时工作

0 个答案:

没有答案