angularjs - 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);

这里的关键是传递trueto $new，它接受一个参数 for 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');
}

小提琴

Answer 3

以下是步骤：

1. 通过使用将您的 HTML 添加到 DOMvar comiledHTML = angular.element(yourHTML);
2. 如果需要，请创建一个新范围var newScope = $rootScope.$new();
3. 调用 $comile(); 返回链接函数的函数var linkFun = $compile(comiledHTML);
4. 通过调用 linkFun 绑定新范围var finalTemplate = linkFun(newScope);
5. 将 finalTemplate 附加到您的 DOM YourHTMLElemet.append(finalTemplate);

Answer 4

看看我的 plunkr。我正在以编程方式生成带有渲染指令的小部件指令。

https://plnkr.co/edit/5T642U9AiPr6fJthbVpD?p=preview

angular
  .module('app', [])
  .controller('mainCtrl', $scope => $scope.x = 'test')
  .directive('widget', widget)
  .directive('render', render)

function widget() {
  return {
    template: '<div><input ng-model="stuff"/>I say {{stuff}}</div>'
  }
}

function render($compile) {
  return {
    template: '<button ng-click="add()">{{name}}</button><hr/>',
    link: linkFn
  }

  function linkFn(scope, elem, attr) {
    scope.name = 'Add Widget';
    scope.add = () => {
      const newScope = scope.$new(true);
      newScope.export = (data) => alert(data);
      const templ = '<div>' +
                      '<widget></widget>' +
                      '<button ng-click="export(this.stuff)">Export</button>' +
                    '</div>';
      const compiledTempl = $compile(templ)(newScope);
      elem.append(compiledTempl);
    }
  }
}

Answer 5

我假设当您谈论隔离范围时，您正在谈论指令。

这是一个如何做到这一点的例子。 http://jsfiddle.net/rgaskill/PYhGb/

var app = angular.module('test',[]);

app.controller('TestCtrl', function ($scope) {
    $scope.val = 'World';
});

app.factory('AlertFactory', function () {

    return {
        doWork: function(scope) {
            scope.title = 'Fun';    
            //scope.title = scope.val;  //notice val doesn't exist in this scope
        }
    };

});

app.controller('DirCtrl', function ($scope, AlertFactory) {
    AlertFactory.doWork($scope);  
});

app.directive('titleVal',function () {
    return {
        template: '<h1>Hello {{title}}</h1>',
        restrict: 'E',
        controller: 'DirCtrl',
        scope: {
            title: '='
        },
        link: function() {

        }
    };

});

基本上，将控制器附加到已定义隔离范围的指令。注入指令控制器的作用域将是一个隔离作用域。在指令控制器中，您可以注入您的 AlertFactory ，您可以将隔离范围传递给它。