Angular Direktive Vorlage unbekannt Umfang

Ich weiß, es gibt eine Menge Fragen und Beiträge über AngularJS und wie Direktiven verwendet werden sollen. Und meine Arbeit klappte gut, bis ich ein anderes Problem hatte, das ich nicht zu lösen weiß.Angular Direktive Vorlage unbekannt Umfang

Ich verwende eine Direktive für ein benutzerdefiniertes HTML-Element. Directive wandelt dieses Element in einen regulären HTML-Baum um, wie er in einer Vorlage definiert ist. Das HTML-Element verfügt über einige Attribute, die beim Erstellen der Vorlage verwendet werden. Daten für eines der Elemente werden mit HTTP-Anforderung empfangen und erfolgreich geladen. Dies ist der Teil, den ich gut funktionierte.

Jetzt möchte ich etwas mehr tun. I've created a plunker which is an example of what I want to achieve. Es ist eine falsche, aber veranschaulicht mein Problem gut.

index.html:

<body ng-controller="MainCtrl"> 
    <div id="phones"> 
     <phone brand="SmartBrand" model="xx" comment="blah"></phone> 
     <phone brand="SmarterBrand" model="abc" comment="other {{dynamic.c1}}"></phone> 
    </div> 
</body>

Angular Richtlinie:

app.directive('phone', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      'comment': '@', 
      'brand': '@' 
     }, 
     templateUrl: 'customTpl.html', 
     controller: function($scope) { 
      fakeResponse = { 
       "data": { 
        "success": true, 
        "data": "X300", 
        "dynamic": { 
         "c1": "12", 
         "c2": "1" 
        } 
       } 
      } 
      $scope.model = fakeResponse.data.data; 
      $scope.dynamic = fakeResponse.data.dynamic; 
     } 
    } 
});

Vorlage:

<div class="phone"> 
    <header> 
     <h2>{{brand}} <strong>{{model}}</strong></h2> 
    </header> 
    <p>Comment: <strong>{{comment}}</strong></p> 
</div>

So würde ich in dem Elemente eines des Tags in der Lage sein möge anpassen (Telefonkommentar in diesem Beispiel). Der Trick besteht darin, dass die Anzahl der zusätzlichen Informationen, die im Tag enthalten sein werden, variieren kann. Das einzige, was ich sicher sein kann, ist, dass die Namen denen entsprechen, die von der AJAX-Anfrage erhalten werden. Ich kann den gesamten Kommentar mit AJAX erhalten und das wird mein Problem lösen. Aber ich möchte die Vorlage von den Variablen trennen, mit denen sie erstellt wird. Ist es möglich?

Quelle

2016-04-08 george007

Sie den dynamischen Teil als eine andere Richtlinie oder als ngRepeat Anweisung trennen kann, dann Sie Schleife, und so viel wie Anzahl von dynamischen Daten haben Sie es zeigen Elemente – xelilof

@xelilof danke für Ihre Antwort. Was wäre, wenn der Kommentar für ein Telefon wie folgt aussehen würde: 'comment =" Ich möchte {{dynamic.c1}} Stunden Spielzeit in {{dynamic.c2}} lifetime "' während für ein anderes Telefon es so aussehen würde: 'comment = "Es ist unklar, ob {{dynamic.c1}} Affen {{dynamic.c2}} Telefon in {{dynamic.c3}} Stunde" '? Ich denke, ng-repeat wird nicht tun ... – george007

Ok, ich habe es funktioniert. Es ist vielleicht nicht der Stand der Technik Lösung (ich denke @xelilof Vorschlag, um es mit einer anderen Richtlinie zu tun, könnte richtiger sein), aber ich habe keine Ideen, wie es geht (also zögern Sie nicht, mir zu helfen).

Ich habe den {{comment}} Teil in eine Mikrotemplate gedreht, die von einem Service analysiert wird. I've made a plunk to show you a working sample.

Der JS Teil wie folgt aussieht jetzt:

app.directive('phone', ['dynamic', function(dynamic) { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     'comment': '@', 
     'brand': '@', 
     'color': '@', 
     'photo': '@' 
    }, 
    templateUrl: 'customTpl.html', 
    controller: function($scope) { 
     fakeResponse = { 
     "data": { 
      "success": true, 
      "data": "X300", 
      "dynamic": { 
      "c1": "12", 
      "c2": "2" 
      } 
     } 
     } 
     $scope.model = fakeResponse.data.data; 
     $scope.comment2 = dynamic($scope.comment, fakeResponse.data.dynamic); 
     console.log("Comment after 'dynamic' service is: " + $scope.comment); 
    } 


    } 
}]); 

app.factory('dynamic', function() { 
    return function(template, vars) { 
    for (var v in vars) { 
     console.log("Parsing variable " + v + " which value is " + vars[v]); 
     template = template.replace("::" + v + "::", vars[v]); 
    } 
    return template; 
    } 

});

Quelle

2016-04-14 07:32:17 george007

Angular Direktive Vorlage unbekannt Umfang

Antwort

Verwandte Themen