AngularJS - 如何以编程方式创建新的隔离范围？

Question

我想用Angular.factory创建一个AlertFactory.我定义了一个html模板,如下

var template = "<h1>{{title}}</h1>";

标题由呼叫控制器提供并应用如下

var compiled = $compile(template)(scope);
body.append(compiled);

那么,我如何将隔离范围从控制器传递到工厂？我正在使用控制器跟随代码

AlertFactory.open($scope);

但$ scope是全局控制器范围变量.我只想通过标题属性传递一个小范围的工厂.

谢谢.

Answer 1

您可以手动创建新范围.

你可以创建一个新的范围,$rootScope如果你注入它,或者只是从你的控制器范围 - 这应该无关紧要,因为你将它隔离.

var alertScope = $scope.$new(true);
alertScope.title = 'Hello';

AlertFactory.open(alertScope);

这里的关键是传递true给$new,它接受一个参数isolate,这避免了从父级继承范围.

有关更多信息,请访问:http: //docs.angularjs.org/api/ng.$ro​​otScope.Scope#$new

Answer 2

如果您只需要插入内容,请使用$ interpolate服务而不是$ compile,然后您将不需要范围:

myApp.factory('myService', function($interpolate) {
    var template = "<h1>{{title}}</h1>";
    var interpolateFn = $interpolate(template);
    return {
        open: function(title) {
            var html = interpolateFn({ title: title });
            console.log(html);
            // append the html somewhere
        }
    }
});

测试控制器:

function MyCtrl($scope, myService) {
    myService.open('The Title');
}

小提琴