AngularJS में एक ng शामिल निर्देश के लिए मॉडल निर्दिष्ट करने के लिए कैसे?

Question

मैं एक ही HTML टेम्पलेट का उपयोग 3 स्थानों में, प्रत्येक बार एक अलग मॉडल के साथ करना चाहता हूं। मुझे पता है कि मैं टेम्पलेट से चर का उपयोग कर सकता हूं, लेकिन नाम अलग होंगे।

क्या एनजी शामिल करने के लिए मॉडल पास करने का कोई तरीका है?

यही वह है जो मैं प्राप्त करना चाहता हूं, निश्चित रूप से विशेषता एड-वेरिएबल अब काम नहीं कर रहा है। फिर मेरे शामिल टेम्पलेट में, मैं विवरण ऑब्जेक्ट और इसकी गुणों को acces होगा।

<pane title="{{projectSummary.ProjectResults.DisplayName}}"> 
    <h2>{{projectSummary.ProjectResults.DisplayName}}</h2> 
    <ng-include src="'Partials/SummaryDetails.html'" init-variable="{'detailsObject': projectSummary.ProjectResults}"></ng-include> 
</pane> 

<pane title="Documents" header="true"></pane> 

<pane ng-repeat="document in projectSummary.DocumentResults" title="{{document.DisplayName}}"> 
    <h2>{{document.DisplayName}}</h2> 
    <ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': document}"></ng-include> 
</pane> 

<pane ng-repeat="header in [1]" title="Languages" header="true"></pane> 

<pane ng-repeat="language in projectSummary.ResultsByLanguagePairs" title="{{language.DisplayName}}"> 
    <h2>{{document.DisplayName}}</h2> 
    <ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': language}"></ng-include> 
</pane> 

अगर मैं का उपयोग कर के साथ एक बुरा दृष्टिकोण लिया एनजी-में शामिल हैं, वहाँ कुछ और मैं कोशिश करनी चाहिए है?

Answer 1

नोट: यह मेरा मूल उत्तर नहीं है, लेकिन इस तरह मैं थोड़ी देर के लिए कोणीय का उपयोग करने के बाद ऐसा करूंगा।

मैं एचटीएमएल टेम्पलेट के साथ डायरेक्टिव को गतिशील डेटा में this fiddle में देखे गए निर्देश के रूप में निर्देशित करता हूं।

कदम/नोट इस उदाहरण के लिए:

1. templateUrl और विशेषता (विशेषताओं) में मार्कअप के साथ एक निर्देश को परिभाषित निर्देश (इस उदाहरण में type नाम) में डेटा पारित करने के लिए इस्तेमाल किया।
2. टेम्पलेट में निर्देश डेटा का उपयोग करें (इस उदाहरण में type नामित)।
3. मार्कअप में निर्देश का उपयोग करते समय सुनिश्चित करें कि आप निर्देश (करने के लिए नियंत्रक दायरे से डेटा में पारित कर <address-form type="billing"></address-form> (जहां बिलिंग नियंत्रक गुंजाइश पर एक वस्तु) तक पहुँच रहा है।
4. ध्यान दें कि जब नाम एक निर्देश को परिभाषित इस बारे में अधिक जानकारी कोणीय डॉक्स here में पाया जा सकता ऊंट मामलों है लेकिन जब मार्कअप में प्रयोग किया जाता है कि यह छोटे अक्षर पानी का छींटा सीमांकित (यानी यह js में addressForm लेकिन html में address-form नामित है) कर रहा है।।

यहाँ जेएस:

var myApp = angular.module('myApp',[]); 

angular.module('myApp').directive('addressForm', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'partials/addressform.html', // markup for template 
     scope: { 
      type: '=' // allows data to be passed into directive from controller scope 
     } 
    }; 
}); 

angular.module('myApp').controller('MyCtrl', function($scope) { 
    // sample objects in the controller scope that gets passed to the directive 
    $scope.billing = { type: 'billing type', value: 'abc' }; 
    $scope.delivery = { type: 'delivery type', value: 'def' }; 
}); 

मार्कअप के साथ:

<div ng-controller="MyCtrl"> 
    <address-form type="billing"></address-form> 
    <address-form type="delivery"></address-form> 
</div> 

---

मूल जवाब (जो एक निर्देश BTW का उपयोग करने से पूरी तरह से अलग है)।

नोट: नीचे अपने मूल जवाब से बेला अब और काम करने के लिए प्रकट नहीं होता है एक त्रुटि के कारण (लेकिन यह यहाँ के मामले में यह है अभी भी उपयोगी रखने)

गूगल पर इस बारे में चर्चा हुई थी समूह आप see it here कर सकते हैं।

ऐसा लगता है कि यह कार्यक्षमता बॉक्स के बाहर समर्थित नहीं है लेकिन आप this post में वर्णित ब्रिस के पैच का उपयोग कर सकते हैं।

<script id="partials/addressform.html" type="text/ng-template"> 
    partial of type {{type}}<br> 
</script> 

<div ng-controller="MyCtrl"> 
    <ng-include src="'partials/addressform.html'" onInclude="type='billing'"></ng-include> 
    <ng-include src="'partials/addressform.html'" onLoad="type='delivery'"></ng-include> 
</div> 

Answer 2

Quick'n'dirty समाधान:

<div ng-init="details=document||language||projectSummary.ProjectResults"> 

Answer 3

वहाँ एक नहीं बल्कि सरल उपाय,, नहीं क्या Misko है, हालांकि मैं मानता चाहिए यह

यहाँ उसकी jsfiddle से नमूना कोड है सिफारिश करूँगा। लेकिन अगर निर्देश बनाना आपके लिए एक ओवरकिल है और ब्रिस का पैच प्राप्त करना संभव नहीं है तो निम्नलिखित आपकी मदद करेगा।

<div ng-repeat="name in ['A']" ng-include="'partial.html'"></div> 
<div ng-repeat="name in ['B']" ng-include="'partial.html'"></div> 

<script type="text/ng-template" id="partial.html"> 
    <div>{{ name }}</div> 
</script> 

यह स्पष्ट है कि यह क्यों काम करता है। यहां एक उदाहरण देखें: http://jsfiddle.net/Cndc6/4/

Answer 4

इसे ठीक करने के लिए एक पुल नहीं है लेकिन ऐसा लगता है कि यह मर चुका है की तरह: https://github.com/angular/angular.js/pull/1227

कोणीय स्रोत कोड को संशोधित बिना यह एक पुन: प्रयोज्य नहीं के लिए भी hacky- में समस्या का समाधान होगा लग रहा है जिस तरह से:

directive('newScope', function() { 
    return { 
     scope: true, 
     priority: 450, 
    }; 
}); 

और एक उदाहरण:

<div new-scope ng-init="myVar = 'one instance'" ng-include="'template.html'"></div> 
<div new-scope ng-init="myVar = 'another instance'" ng-include="'template.html'"></div> 

यहाँ acti में इसके बारे में एक Plunker है पर: http://plnkr.co/edit/El8bIm8ta97MNRglfl3n

Answer 5

<div new-scope="myVar = 'one instance'" ng-include="'template.html'"></div> 

directive('newScope', function() { 
    return { 
     scope: true, 
     priority: 450, 
     compile: function() { 
      return { 
       pre: function (scope, element, attrs) { 
        scope.$eval(attrs.newScope); 
       } 
      }; 
     } 
    }; 
}); 

यह एक निर्देश है कि कोणीय के ng-init से कोड के साथ John Culviner's answer से new-scope को जोड़ती है।

पूर्णता के लिए, यह Angular 1.2 26 ng-init source है, आप देख सकते हैं नए-गुंजाइश निर्देश में केवल परिवर्तन scope: true

{ 
    priority: 450, 
    compile: function() { 
    return { 
     pre: function(scope, element, attrs) { 
     scope.$eval(attrs.ngInit); 
     } 
    }; 
    } 
} 

Answer 6

के अलावा मैं आप सुन रहा है! एनजी-शामिल नहीं है कि पुन: प्रयोज्य है क्योंकि इसकी वैश्विक दायरे तक पहुंच है। यह थोड़ा अजीब है।

स्थानीय चर सेट करने का एक तरीका होना चाहिए। Using a new directive instead of ng-include एक क्लीनर समाधान है।

आदर्श उपयोग लगता है:

<div ng-include-template="'Partials/SummaryDetails.html'" ng-include-variables="{ 'detailsObject': language }"></div> 

निर्देश है:

.directive(
    'ngIncludeTemplate' 
() -> 
    { 
     templateUrl: (elem, attrs) -> attrs.ngIncludeTemplate 
     restrict: 'A' 
     scope: { 
     'ngIncludeVariables': '&' 
     } 
     link: (scope, elem, attrs) -> 
     vars = scope.ngIncludeVariables() 
     for key, value of vars 
      scope[key] = value 
    } 
) 

आप देख सकते हैं कि निर्देश वैश्विक क्षेत्र का उपयोग नहीं करता। इसके बजाए, यह वस्तु को एनजी-इन-वेरिएबल्स से पढ़ता है और उन सदस्यों को अपने स्थानीय दायरे में जोड़ता है।

यह स्वच्छ और सामान्य है।