AngularJS - Làm cách nào để tạo một phạm vi mới, riêng biệt theo lập trình?

Tôi muốn tạo một AlertFactory với Angular.factory. Tôi đã xác định một mẫu html như sau

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

Tiêu đề được cung cấp bởi bộ điều khiển cuộc gọi và áp dụng như sau

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

Vì vậy, làm thế nào tôi có thể chuyển phạm vi bị cô lập từ bộ điều khiển đến nhà máy? Tôi đang sử dụng mã theo dõi bộ điều khiển

AlertFactory.open($scope);

Nhưng $ scope là biến phạm vi bộ điều khiển toàn cầu. Tôi chỉ muốn vượt qua một phạm vi nhỏ cho nhà máy chỉ có thuộc tính tiêu đề.

Cảm ơn bạn.

Bạn có thể tạo phạm vi mới theo cách thủ công.

Bạn có thể tạo một phạm vi mới $rootScopenếu bạn đưa nó vào hoặc chỉ từ phạm vi bộ điều khiển của bạn - điều này không quan trọng vì bạn sẽ làm cho nó bị cô lập.

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

AlertFactory.open(alertScope);

Khóa ở đây là chuyển truetới $new, chấp nhận một tham số cho isolate, điều này tránh kế thừa phạm vi từ cấp độ gốc.

Có thể tìm thêm thông tin tại: http://docs.angularjs.org/api/ng.$rootScope.Scope#$new

Nếu bạn chỉ cần nội suy mọi thứ, hãy sử dụng dịch vụ $ interpolate thay vì $ compile, và sau đó bạn sẽ không cần phạm vi:

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

Bộ điều khiển thử nghiệm:

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

Vĩ cầm

Tiếp theo là các bước:

1. Thêm HTML của bạn vào DOM bằng cách sử dụng var comiledHTML = angular.element(yourHTML);
2. Tạo một Phạm vi mới nếu bạn muốn var newScope = $rootScope.$new();
3. Gọi $ comile (); hàm trả về hàm liên kếtvar linkFun = $compile(comiledHTML);
4. Ràng buộc phạm vi mới bằng cách gọi linkFun var finalTemplate = linkFun(newScope);
5. Nối finalTemplate vào DOM của bạn YourHTMLElemet.append(finalTemplate);

kiểm tra plunkr của tôi. Tôi đang lập trình tạo một chỉ thị tiện ích con với một chỉ thị hiển thị.

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

Tôi giả sử khi bạn đang nói về một phạm vi cô lập, bạn đang nói về một chỉ thị.

Đây là một ví dụ về cách làm điều đó. 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() {

        }
    };

});

Về cơ bản, hãy gắn bộ điều khiển vào một chỉ thị đã xác định phạm vi cô lập. Phạm vi được đưa vào bộ điều khiển chỉ thị sẽ là phạm vi cô lập. Trong bộ điều khiển chỉ thị, bạn có thể đưa AlertFactory của mình vào mà bạn có thể chuyển phạm vi cô lập tới.