winkel-uib-popover-template bidirektionale eingabe

Ich arbeite vor kurzem an uib-popover, ich habe ein problem gefunden, mit dem ich verwirrt bin.winkel-uib-popover-template bidirektionale eingabe

Ich möchte eine Vorlage popover, in dieser Vorlage habe ich eine Eingabe, zunächst die Eingabe haben Anfangswert.

Ich möchte den Inhalt in Echtzeit basierend auf der Eingabe aktualisieren. Wenn ich nur eine Variable binde, funktioniert sie nicht. Wenn ich ein Objekt binde, funktioniert es. Ich kann dieses Problem nicht herausfinden.

index.html

<!doctype html> 
<html ng-app="ui.bootstrap.demo"> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 

<div ng-controller="PopoverDemoCtrl"> 
    <hr/> 
    <hr/> 
    <hr/> 
    <button uib-popover-template="'myPopoverTemplate.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button> 
    &nbsp; 
    {{dynamicPopover.title}} 
    <script type="text/ng-template" id="myPopoverTemplate.html"> 
     <div class="form-group"> 
      <input type="text" ng-model="dynamicPopover.title" class="form-control"> 
     </div> 
    </script> 

    <button uib-popover-template="'inputContent.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button> 
    &nbsp; 
    {{inputContent}} 
    <script type="text/ng-template" id="inputContent.html"> 
     <div class="form-group"> 
      <input type="text" ng-model="inputContent" class="form-control"> 
     </div> 
    </script> 
</div> 
    </body> 
</html>

example.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function($scope, $sce) { 
    $scope.dynamicPopover = { 
    title: 'Title' 
    }; 
    $scope.inputContent = "hello"; 
});

Hier ist die Plunker Beispiel https://plnkr.co/edit/IPXb5tddEPQPPAUrjdYx?p=preview, Sie haben einen Versuch könnte.

Quelle

2017-01-11 J ZHOU

Ich denke, das liegt daran, Variablen sind durch Wert gebunden und Objekte sind durch Referenz in Javascript gebunden. Was ist das Problem mit der Bindung an das Objekt? –

Sie [kann keine 2-Wege-Bindung mit Primitiven haben] (http://stackoverflow.com/questions/38078884/two-way-binding-on-primitive-variables-in-angularjs-directive) – RamblinRose

@big_water ich gerade möchte herausfinden, warum es nicht an eine Variable binden kann. –

Sie haben einen interessanten Punkt in Ihrem zweiten Plunk gemacht. Ich habe das beim ersten Mal nicht bemerkt, aber ich denke, es könnte daran liegen, dass du deine Popover-Eingabe in ein Skript-Tag machst. Ich würde vorschlagen, eine benutzerdefinierte Direktive zu verwenden, wenn Sie dies im Gegensatz zu einem Inline-Skript tun könnten. Auf diese Weise wird es mit dem Digest-Zyklus von eckig aktualisiert.

Beispiel Richtlinie:

customPopoverApp.directive('customPopover',['$compile','$templateCache',function($compile,$templateCache){ 
    return { 
    restrict:'A', 
    transclude:true, 
    template:"<span>Click on me to show the popover</span>", 
    link:function(scope,element,attr){ 
     var contentHtml = $templateCache.get("customPopover.html"); 
     contentHtml=$compile(contentHtml)(scope); 
     $(element).popover({ 
     trigger:'click', 
     html:true, 
     content:contentHtml, 
     placement:attr.popoverPlace 
     }); 
    } 
    }; 
}]);

Und es zu verwenden:

<button custom-popover="" popover-place="bottom">click on me to show the popover</button> 
{{message}} 

<script type="text/ng-template" id="customPopover.html"> 
    <div class="form-group"> 
    <input type="text" ng-model="message" class="form-control"> 
    </div> 
</script>

Hier ist ein working plunk. Ich hoffe, das ist, was Sie suchen

Quelle

2017-01-12 21:51:38

winkel-uib-popover-template bidirektionale eingabe

Antwort

Verwandte Themen