AngularJS - 프로그래밍 방식으로 격리된 새 스코프를 만들려면 어떻게 해야 합니까?

AngularJS - 프로그래밍 방식으로 격리된 새 스코프를 만들려면 어떻게 해야 합니까?

Angular.factory를 사용하여 AlertFactory를 만들고 싶습니다.html 템플릿을 다음과 같이 정의했습니다.

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

타이틀은 콜컨트롤러에 의해 제공되며 다음과 같이 적용됩니다.

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

컨트롤러에서 공장까지 격리된 범위를 전달하려면 어떻게 해야 할까요?컨트롤러 추종 코드를 사용하고 있습니다.

AlertFactory.open($scope);

단, $scope는 글로벌 컨트롤러 범위 변수입니다.저는 단지 소유권만 가지고 공장의 작은 범위를 통과하고 싶습니다.

감사해요.

수동으로 새 범위를 생성할 수 있습니다.

다음 위치에서 새 범위를 생성할 수 있습니다.$rootScope주입하는 경우 또는 컨트롤러 범위에서만 볼 경우 분리되기 때문에 문제가 되지 않습니다.

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

AlertFactory.open(alertScope);

여기서 열쇠는 통과입니다.true로.$new1개의 파라미터를 받아들입니다.isolate그러면 부모로부터 스코프가 상속되지 않습니다.

상세한 것에 대하여는, http://docs.angularjs.org/api/ng.$rootScope.Scope#$new 를 참조해 주세요.

보간만 필요한 경우 $compile 대신 $interpolate 서비스를 사용하면 스코프가 필요하지 않습니다.

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

만지작거리다

다음 단계는 다음과 같습니다.

1. 를 사용하여 HTML을 DOM 에 추가합니다.var comiledHTML = angular.element(yourHTML);
2. 필요한 경우 새 범위 생성var newScope = $rootScope.$new();
3. $comile(); 링크 함수를 반환하는 함수를 호출합니다.var linkFun = $compile(comiledHTML);
4. linkFun을 호출하여 새 범위를 바인딩합니다.var finalTemplate = linkFun(newScope);
5. dom에 finalTemplate 추가YourHTMLElemet.append(finalTemplate);

내 플렁크 좀 봐렌더 지시문을 사용하여 위젯 지시문을 프로그래밍 방식으로 생성하고 있습니다.

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

당신이 고립된 범위에 대해 말할 때 당신은 지시를 말하는 것 같습니다.

여기 그것을 하는 방법의 예가 있습니다.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를 주입할 수 있습니다.

언급URL : https://stackoverflow.com/questions/15559442/angularjs-how-can-i-create-a-new-isolated-scope-programmatically