किसी तत्व के अंदर एक कोणीय जेएस टेम्पलेट स्ट्रिंग डालें

Question

मैं किसी तत्व के अंदर कुछ कोणीय जेएस टेम्पलेट स्ट्रिंग डालने की कोशिश कर रहा हूं, और एक अनुपालन आउटपुट की अपेक्षा करता हूं। लेकिन ऐसा नहीं हो रहा है।

एचटीएमएल

<div ng-controller="testController"> 
    <div ng-bind-html-unsafe="fruitsView"></div> 
</div> 

नियंत्रक:

function filterController($scope){ 
    ... 
    $scope.arr = ["APPLE", "BANANA"]; 
    $scope.fruitsView = '<div><p ng-repeat="each in arr">{{each}}</p></div>'; 
} 

ouput सिर्फ {{each}} है।

तो मैं एक तत्व के अंदर एक कोणीय जेएस टेम्पलेट स्ट्रिंग (यहां $scope.fruitsView) कैसे डालूं?

मैंने इसके लिए fiddle बनाया है।

Answer 1

इस मामले में, आप बस "HTML डालें" नहीं चाहते हैं, लेकिन इसे संकलित करें। आप $compile सेवा का उपयोग कर डोम नोड्स बना सकते हैं।

var tpl = $compile('<div><p ng-repeat="each in arr">{{each}}</p></div>')(scope); 

आप देख सकते हैं, $compile एक समारोह है कि एक पैरामीटर है, जो के खिलाफ कोड मूल्यांकन किया जाता है के रूप में एक गुंजाइश वस्तु लेता है देता है। परिणामस्वरूप सामग्री को DOM में element.append() के साथ डाला जा सकता है, उदाहरण के लिए।

महत्वपूर्ण नोट: लेकिन के तहत किसी भी हालत किसी भी डोम से संबंधित कोड करता है अपने नियंत्रक में हैं। उचित स्थान हमेशा एक निर्देश है। इस कोड को निर्देश में आसानी से फेंक दिया जा सकता है, लेकिन मुझे आश्चर्य है कि आप प्रोग्रामेटिक रूप से HTML को क्यों सम्मिलित कर रहे हैं।

क्या आप यहां कुछ प्रकाश डाल सकते हैं ताकि मैं एक और विशिष्ट उत्तर प्रदान कर सकूं?

अद्यतन

अपने डेटा मान लिया जाये कि एक सेवा से आता है:

.factory('myDataService', function() { 
    return function() { 
    // obviously would be $http 
    return [ "Apple", "Banana", "Orange" ]; 
    }; 
}); 

और अपने टेम्पलेट एक सेवा

.factory('myTplService', function() { 
    return function() { 
    // obviously would be $http 
    return '<div><p ng-repeat="item in items">{{item}}</p></div>'; 
    }; 
}); 

तो फिर तुम एक साधारण निर्देश है कि में पढ़ता बनाने से आता है प्रदान किया गया टेम्पलेट, इसे संकलित करता है, और इसे डिस्प्ले में जोड़ता है:

.directive('showData', function ($compile) { 
    return { 
    scope: true, 
    link: function (scope, element, attrs) { 
     var el; 

     attrs.$observe('template', function (tpl) { 
     if (angular.isDefined(tpl)) { 
      // compile the provided template against the current scope 
      el = $compile(tpl)(scope); 

      // stupid way of emptying the element 
      element.html(""); 

      // add the template content 
      element.append(el); 
     } 
     }); 
    } 
    }; 
}); 

फिर अपने दृश्य से:

<div ng-controller="MyCtrl"> 
    <button ng-click="showContent()">Show the Content</button> 
    <div show-data template="{{template}}"></div> 
</div> 

और नियंत्रक में, आप बस इसे एक साथ बाँध:

.controller('MyCtrl', function ($scope, myDataService, myTplService) { 
    $scope.showContent = function() { 
    $scope.items = myDataService(); // <- should be communicated to directive better 
    $scope.template = myTplService(); 
    }; 
}); 

और यह सब एक साथ काम करना चाहिए!

पीएस: यह सब मानते हैं कि आपका टेम्पलेट सर्वर से आता है। यदि ऐसा नहीं होता है, तो आपका टेम्पलेट निर्देश में होना चाहिए, जो चीजों को सरल बनाता है।