2016-07-02 15 views
0

Sobald Benutzer auf das Eingabefeld klicken .. Ich möchte die ID des Eingabefeldes & Filter das Objekt & binden Sie die Daten im Popover-Fenster. Aber Scope wird nicht von der Direktive aktualisiert. Im Folgenden finden Sie den Code bitte lassen Sie mich wissen, wo ich zu tun habe falschBootstrap Popover nicht aktualisieren Scope Variable

var app = angular.module('MyModule', []); 
    app.controller("TestController", function ($scope, $window) { 
     //$scope.ID = '0'; 
     $scope.myObj = [{ "ID": 0, "Name": 'user0' }, { "ID": 1, "Name": 'user1' }, { "ID": 2, "Name": 'user2' }] 

     $scope.GetData = function() { 

      var match = $.grep($scope.myObj, function (e) { 
       return e.ID == $scope.myID 
      }); 

      return match; 
     }; 

    }); 

    app.directive('popOver', function ($compile, $timeout) { 
     return { 
      restrict: 'A', 
      link: function (scope, el, attrs) { 
       $(el).bind('click', function() { 
        scope.$apply(function() { 
         scope.myID = attrs.popoverid ; 
        }); 
       }); 


       $(el).popover({ 
        placement: 'bottom', 
        container: 'body', 
        trigger: "click", 
        content: $compile($('#popover-content').html())(scope) 
       }); 
      } 
     }; 
    }); 


<div ng-repeat="i in [0,1,2]"> 
     <input style="background: transparent" 
      type="text" 
      pop-over 
      popoverid="{{i}}" 
      id="{{i}}" 
      class="form-control enterTime" data-html="true"> 
     <br /><br /> 
    </div> 


    <div class="bottom hide" id="popover-content"> 
     <div class="arrow" style="left: 47%;"></div> 
     <div class="Bground-Project"> 
      <table> 
       <tr> 
        <td> 
         {{GetData()}} 
        </td> 
       </tr> 
      </table> 
      <button type="button" ng-click="buttonClicked()">click me</button> 
     </div> 
    </div> 

Antwort

0

wenn ein primitiver Typ ist (dh eine Zeichenfolge, eine Zahl oder boolean-Typ) geschrieben - zB scope.name = newName - - Das "Schreiben" geht immer zum lokalen Bereich/Objekt. Mit anderen Worten: Der untergeordnete Bereich erhält eine eigene Namenseigenschaft, die die gleichnamige übergeordnete Eigenschaft schattiert. Die Lösung besteht darin, ein Objekt anstelle eines primitiven Typs im übergeordneten Bereich zu verwenden. Der untergeordnete Bereich erhält dann eine Referenz auf dieses Objekt. Alle Schreibvorgänge in die Objekteigenschaften (ob vom übergeordneten oder vom untergeordneten Objekt) werden an dieses eine Objekt gesendet. (Der untergeordnete Bereich erhält kein eigenes Objekt.)

Is it Possible to Update Parent Scope from Angular Directive with scope: true?