我正在使用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;
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;
这已成功加载我的个人页面,但在该页面中丢失了绑定。此外,每当我在控制器中更改formName时,我都希望加载一个新表单。
需要做什么才能使表单加载和绑定同时工作