4

これが私のコードです:

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

ここに動作を示すフィドルがあります

ご覧のとおり、2 つの「MyCtrl」文字列がレンダリングされます。つまり、angular は手動で作成したスコープ オブジェクトを無視します。

$compile問題は、作成したスコープを使用するにはどうすればよいですか?

更新:醜い回避策:

$compileモデルをもう一度適用する呼び出しの後:

angular.element(e3[0]).scope().$apply(function(scope) {
    scope.model = {name:'MyCtrl1'};
});
4

1 に答える 1

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()必要ですが、理由はわかりません。うまくいけば、他の誰かが私たちにそれを説明することができます。

于 2013-03-05T16:33:33.780 に答える