AngularJS - मैं प्रोग्रामेटिक रूप से एक नया, अलग-अलग स्कोप कैसे बना सकता हूं?

Question 1

मैं Angular.factory के साथ एक अलर्ट बनाना चाहता हूं। मैंने एक html टेम्पलेट को फॉलो की तरह परिभाषित किया

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

शीर्षक कॉल कंट्रोलर द्वारा प्रदान किया जाता है और अनुसरण के रूप में लागू किया जाता है

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

तो, मैं नियंत्रक से कारखाने तक अलग-अलग गुंजाइश कैसे पारित कर सकता हूं? मैं कंट्रोलर फॉलो कोड में उपयोग कर रहा हूं

AlertFactory.open($scope);

लेकिन $ गुंजाइश वैश्विक नियंत्रक गुंजाइश चर है। मैं बस शीर्षक संपत्ति के साथ कारखाने के लिए एक छोटा सा दायरा पारित करना चाहता हूं।

धन्यवाद।

Question 2

आप मैन्युअल रूप से एक नया स्कोप बना सकते हैं।

$rootScopeयदि आप इसे इंजेक्ट करते हैं, या सिर्फ अपने कंट्रोलर स्कोप से आप एक नया स्कोप बना सकते हैं - यह बात अलग नहीं होनी चाहिए क्योंकि आप इसे अलग कर रहे हैं।

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

AlertFactory.open(alertScope);

यहां कुंजी पास trueहो रही है $new, जो एक पैरामीटर को स्वीकार करता है isolate, जो माता-पिता से विरासत के दायरे से बचा जाता है।

अधिक जानकारी यहां पाई जा सकती है: http://docs.angularjs.org/api/ng.$rootScope.Scope#$new

Question 3

यदि आपको केवल चीजों को प्रक्षेपित करने की आवश्यकता है , तो $ संकलित के बजाय $ प्रक्षेप सेवा का उपयोग करें , और फिर आपको गुंजाइश की आवश्यकता नहीं होगी:

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

बेला

Question 4

निम्नलिखित कदम हैं:

उपयोग करके अपने HTML को DOM में जोड़ें var comiledHTML = angular.element(yourHTML);
यदि आप चाहते हैं तो एक नया स्कोप बनाएं var newScope = $rootScope.$new();
$ Comile () को कॉल करें; फ़ंक्शन जो लिंक फ़ंक्शन लौटाता हैvar linkFun = $compile(comiledHTML);
लिंकफुन कहकर नए दायरे को बांधें var finalTemplate = linkFun(newScope);
अपने DOM के लिए FinalTemplate परिशिष्ट करें YourHTMLElemet.append(finalTemplate);

Question 5

मेरे प्लंकर को देखें। मैं प्रोग्रामेटिक रूप से एक रेंडर निर्देश के साथ विजेट निर्देश उत्पन्न कर रहा हूं।

https://plnkr.co/edit/5T642U9AiPr6fJthbVpD??==view

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

Question 6

मुझे लगता है जब आप एक अलग दायरे के बारे में बात कर रहे हैं तो आप एक निर्देश के बारे में बात कर रहे हैं।

यह कैसे करना है इसका एक उदाहरण है। 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() {

        }
    };

});

मूल रूप से, एक नियंत्रक को एक निर्देश में संलग्न करें जिसने एक अलग-अलग गुंजाइश को परिभाषित किया है। डायरेक्टिव कंट्रोलर में इंजेक्ट किया गया स्कोप एक अलग स्कोप होगा। निर्देश नियंत्रक में आप अपने अलर्ट के साथ अलर्ट कर सकते हैं, जिसमें आप अलग-अलग गुंजाइश पास कर सकते हैं।