कोणीयजेएस - मैं प्रोग्रामेटिक रूप से एक नया, अलग-अलग गुंजाइश कैसे बना सकता हूं?

Question

मैं Angular.factory के साथ एक अलर्ट फैक्टरी बनाना चाहता हूँ। मैं जैसे किसी HTML टेम्पलेट का पालन

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

शीर्षक नियंत्रक बुला द्वारा प्रदान की और लागू किया जाता है

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

का पालन के रूप में तो परिभाषित, मैं कैसे कारखाने के लिए नियंत्रक से अलग गुंजाइश पारित कर सकते हैं? मैं नियंत्रक पालन कोड

AlertFactory.open($scope); 

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

धन्यवाद।

Answer 1

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

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

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

AlertFactory.open(alertScope); 

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

में और जानकारी यहां पाया जा सकता है: http://docs.angularjs.org/api/ng.$rootScope.Scope#$new

Answer 2

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

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

     } 
    }; 

}); 

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

Answer 3

आप केवल बातें अंतर्वेशन की जरूरत है, $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'); 
} 

Fiddle

Answer 4

अनुवर्ती चरण हैं:

1. var comiledHTML = angular.element(yourHTML);
2. उपयोग कर एक नया स्कोप बनाएं यदि आप var newScope = $rootScope.$new();
3. कॉल $ comile चाहते हैं() द्वारा डोम के लिए अपने HTML जोड़ें; समारोह जो लिंक फ़ंक्शन var linkFun = $compile(comiledHTML);
4. बाइंड नई गुंजाइश अपने डोम YourHTMLElemet.append(finalTemplate);

Answer 5

जांच मेरी plunkr को linkFun var finalTemplate = linkFun(newScope);

संलग्न 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); 
    } 
    } 
}