फ्लाई

Question

पर संकलित निर्देश के लिए एक वस्तु को पास करने के रूप में एक ऑब्जेक्ट पास करना मेरे पास पृष्ठ पर एक कोणीय तत्व है जिसे शेष गैर कोणीय पृष्ठ तत्वों के साथ संवाद करने की आवश्यकता है।

मैं फ्लाई पर निर्देशक तत्व बना रहा हूं, और इसे अपने लक्षित div में जोड़ रहा हूं। मैं उस ऑब्जेक्ट (AJAX ऑब्जेक्ट) को निर्देशित निर्देशित करने की कोशिश कर रहा हूं, जिसमें केवल विशेषताएँ हैं।

मुद्दा यह है कि मैं यह समझ नहीं सकता कि इस एजेक्स ऑब्जेक्ट को निर्देश में कैसे पास किया जाए, क्योंकि $ संकलन के लिए एक गुंजाइश की आवश्यकता है। जब http समाप्त होता है, और क्योंकि मुझे निर्देश में = का उपयोग करना है, तो निर्देश अधिक से अधिक सवार हो रहे हैं।

कृपया मेरा प्लंक देखें: https://plnkr.co/edit/brTWgUWTotI44tECZXlQ (छवियों के बारे में खेद है)। निर्देश को ट्रिगर करने के लिए <button> पर क्लिक करें।

(function() { 
'use strict'; 
var CHANNEL = 'podOverlay'; 
angular.module('CavernUI', []) 
    .controller('CavernCtrl', function($scope,getItemService) { 

    $scope.model = {}; 
    var _pods = $scope.model.pods = {}; 

    function getData(selector) { 
     $(selector).each(function(i, pod) { 
     _pods[+pod.dataset.item] = { 
      $: $(pod) 
     }; 
     }); 

     Object.keys($scope.model.pods).map(function(key) { 
     getItemService.getItem(key).success(function(response) { 
      _pods[key] = angular.extend(_pods[key], response); 
      $scope.$broadcast(CHANNEL, _pods[key], $scope); 
     }); 
     }) 
    } 

    $scope.runPodCheck = function(selector) { 
     getData(selector); 
    } 
    }) 
    .directive('podchecker', function($compile) { 

    var createOverlay = function(e,data,scope){ 
     scope.data = data; 
     // can i just pass data rather than scope.data? 
     // If I pass the scope, then when another $broadcast happens 
     // the scope updates, wiping out the last scope change. 
     // Scope here really needs to be a static object that's 
     // created purely for the hand off. But I don't know if 
     // that can be done. 
     angular.element(data.$[0]).empty().append($compile('<overlay data="data"></overlay>')(scope)); 
    } 

    return { 
     restrict: 'E', 
     scope: { 
     check: '&', 
     }, 
     templateUrl: 'tpl.html', 
     link: function(scope,elm,attr){ 
     scope.$on(CHANNEL,createOverlay); 
     } 
    }; 
    }) 
    .directive('overlay', function() { 
    return { 
     restrict: 'E', 
     scope: { 
     o: '=data' // here is the problem. 
     }, 
     template: '<div class="overlay"><a href="{{o.url}}"><img ng-src="{{o.images.IT[0]}}"/></a></div>', 
     link: function(scope, elm, attr) { 

     } 
    } 
    }) 
    .service('getItemService', ['$http', function($http) { 
    this.getItem = function(itemId) { 
     return $http({ 
     method: 'GET', 
     url: 'https://www.aussiebum.com/ajaxproc/item', 
     params: { 
      id: itemId, 
      ajxop: 1 
     }, 
     }); 
    }; 
    }]); 
}()); 

संपादन: उम्मीद ouput:

Answer 1

मुझे यकीन है कि यह सबसे अच्छा तरीका है नहीं कर रहा हूँ, लेकिन एक तरह से मैन्युअल रूप से ओवरले से प्रत्येक के लिए एक नया गुंजाइश बनाने के लिए हो सकता है।

तो यह बदल दिया है:

var createOverlay = function(e,data,scope){ 
      scope.data = data; 
      angular.element(data.$[0]).empty().append($compile('<overlay data="data"></overlay>')(scope)); 
     } 

यह करने के लिए:

var createOverlay = function(e,data,scope){ 
      var overlayScope = scope.$new(false); // use true here for isolate scope, false to inherit from parent 
      overlayScope.data = data; 
      angular.element(data.$[0]).empty().append($compile('<overlay data="data"></overlay>')(overlayScope)); 
     } 

अपडेट किया गया Plnkr: https://plnkr.co/edit/wBQ1cqVKfSqwqf04SnPP

अधिक जानकारी के बारे में $new()

चीयर्स!