这是我的代码:
HTML:
<div id="container" ng-controller="MyCtrl"> {{model.name}} </div>
JavaScript的:
var app=angular.module('myApp', []);
var $injector =angular.injector(['ng']);
$injector.invoke(function($compile, $rootScope) {
var html = '<div ng-controller="MyCtrl1">{{model.name}}</div>'
var scope = $rootScope.$new();
scope.model = {name:'MyCtrl1'};
//alert(scope.model.name);
var e3 = $compile(html)(scope);
$('#container').append(e3[0]);
});
function MyCtrl($scope) {
$scope.model={};
$scope.model.name = 'MyCtrl';
};
function MyCtrl1($scope) {
//alert('MyCtrl1');
};
Here is a fiddle showing the behavior
正如你所看到它呈现两个'MyCtrl'字符串。即angular忽略我手动创建的范围对象。
问题是:如何让$compile
使用我创建的范围?
更新:丑陋的解决方法:
在致电$compile
之后再次申请模特:
angular.element(e3[0]).scope().$apply(function(scope) {
scope.model = {name:'MyCtrl1'};
});
答案 0 :(得分:5)
ng-app创建一个注入器,然后你创建另一个注入器。这可能不是你想要的。我将大部分代码移动到run()方法中,该方法将$ compile服务和$ rootScope注入其中:
app.run(function($compile, $rootScope) {
var html = '<div ng-controller="MyCtrl1">{{model.name}}</div>'
var scope = $rootScope.$new();
scope.model = {name:'MyCtrl1'};
//alert(scope.model.name);
var e3 = $compile(html)(scope);
scope.$apply();
$('#container').append(e3[0]);
});
需要 scope.$apply()
,但我不确定原因。希望其他人可以向我们解释。