$ compile(html)(范围)忽略我手动创建的范围

时间:2013-03-05 13:34:54

标签: jquery angularjs

这是我的代码:

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'};
});

1 个答案:

答案 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]);
});

Fiddle

需要

scope.$apply(),但我不确定原因。希望其他人可以向我们解释。