AngularJS: ¿cómo puedo crear un alcance nuevo y aislado mediante programación?

Quiero crear una AlertFactory con Angular.factory. Definí una plantilla html como seguir

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

El título se proporciona llamando al controlador y se aplica de la siguiente manera

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

Entonces, ¿cómo puedo pasar el alcance aislado del controlador a la fábrica? Estoy usando el código de seguimiento del controlador

AlertFactory.open($scope);

Pero $ scope es la variable de alcance del controlador global. Solo quiero pasar un pequeño alcance para la fábrica con solo propiedad de título.

Gracias.

Puede crear un nuevo alcance manualmente.

Puede crear un nuevo alcance desde $rootScopesi lo inyecta, o simplemente desde el alcance de su controlador; esto no debería importar, ya que lo aislará.

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

AlertFactory.open(alertScope);

La clave aquí es pasar truea $new, que acepta un parámetro para isolate, lo que evita heredar el alcance del padre.

Puede encontrar más información en: http://docs.angularjs.org/api/ng.$rootScope.Scope#$new

Si solo necesita interpolar cosas, use el servicio $ interpolate en lugar de $ compile, y luego no necesitará un alcance:

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

Controlador de prueba:

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

Violín

Los siguientes son los pasos:

1. Agregue su HTML al DOM usando var comiledHTML = angular.element(yourHTML);
2. Cree un nuevo alcance si lo desea var newScope = $rootScope.$new();
3. Llame a $ comile (); función que devuelve la función de enlacevar linkFun = $compile(comiledHTML);
4. Vincular el nuevo alcance llamando a linkFun var finalTemplate = linkFun(newScope);
5. Agregue finalTemplate a su DOM YourHTMLElemet.append(finalTemplate);

mira mi plunkr. Estoy generando programáticamente una directiva de widget con una directiva de representación.

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

Supongo que cuando se habla de un ámbito aislado se está hablando de una directiva.

A continuación, se muestra un ejemplo de cómo hacerlo. 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() {

        }
    };

});

Básicamente, adjunte un controlador a una directiva que haya definido un alcance aislado. El alcance inyectado en el controlador de la directiva será un alcance aislado. En el controlador de la directiva puede inyectar su AlertFactory con el que puede pasar el alcance aislado.