2016-04-11 29 views
0

giriş etiketleri giriş etiketi çalışmıyor tagmodal yerleştirilir

var app = angular.module("myDiscuss", ['ui.bootstrap']); 
 
app.controller('PageController', function($scope, $http) { 
 
    $scope.showModalTag = false; 
 
    $scope.opentag = function() { 
 
    $scope.showModalTag = !$scope.showModalTag; 
 
    }; 
 
}); 
 

 
app.directive('tagmodal', function() { 
 
    return { 
 
    template: '<div class="modal fade">' + 
 
     '<div class="modal-dialog">' + 
 
     '<div class="modal-content">' + 
 
     '<div class="modal-header">' + 
 
     '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
 
     '<h4 class="modal-title">{{ title }}</h4>' + 
 
     '</div>' + 
 
     '<div class="modal-body" ng-transclude></div>' + 
 
     '</div>' + 
 
     '</div>' + 
 
     '</div>', 
 
    restrict: 'E', 
 
    transclude: true, 
 
    replace: true, 
 
    scope: true, 
 
    link: function postLink(scope, element, attrs) { 
 
     scope.title = attrs.title; 
 

 
     scope.$watch(attrs.visible, function(value) { 
 
     if (value == true) 
 
      $(element).modal('show'); 
 
     else 
 
      $(element).modal('hide'); 
 
     }); 
 

 
     $(element).on('shown.bs.modal', function() { 
 
     scope.$apply(function() { 
 
      scope.$parent[attrs.visible] = true; 
 
     }); 
 
     }); 
 

 
     $(element).on('hidden.bs.modal', function() { 
 
     scope.$apply(function() { 
 
      scope.$parent[attrs.visible] = false; 
 
     }); 
 
     }); 
 
    } 
 
    }; 
 
});
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    < href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
    <link rel="stylesheet" type="text/css" href="../css/custom.css"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
    <script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script> 
 

 
    <!-- Angular JS --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 
    <script src=https://curofy-static.s3.amazonaws.com/web/js/typeahead.js></script> 
 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script> 
 

 

 
</head> 
 

 
<body ng-app="myDiscuss"> 
 
    <div ng-controller="PageController"> 
 
    <tagmodal title="Edit Tags" visible="showModalTag"> 
 
     <form role="form"> 
 
     <div class="form-group"> 
 
      <input type="text" value="" data-role="tagsinput"></input> 
 
     </div> 
 
     </form> 
 
    </tagmodal> 
 
    </div> 
 
    <a ng-click="opentag()"><span class="glyphicon glyphicon-pencil" style="color:#009b86"></span>open it</a> 
 
</body> 
 

 
</html>

. eğer biz modal dışarı koymak eğer ince çalışıyorum eğer ben neden olmasın tagmodal içinde çalışmıyor. plnkr link bazı kütüphane var dahil edilecek veya çünkü burada açısal

arasında öyle mi http://plnkr.co/edit/o0BruX9oRRr0Lo5yNXIF?p=preview

cevap

1

sizin koduyla sorun

<tagmodal>

aslında bir şablon ve ayarlandıktan olmasıdır bazı html etiketleri. html'den <tagmodal> içine başka bir html kodu ekleyemezsiniz.

yani., Size (js içinde) direktifi kodunda şablonu içinde html kısmını ekleyebilir

<form role ="form"> 
    <div class="form-group"> 
     <input type="text" value="html" data-role="tagsinput"/> 
    </div> 
</form> 

<tagmodal>

1

sorundur eklemek için izin verilmez , açısal j'ler kullandığınızdan, küme içindeki input öğesi, hazır hazır olaydan sonra oluşturulabilir (tagsinput eklentisi,ile giriş/seçim öğelerinde otomatik olarak başlatılır). Plunker

:

Bunu yapmanın angularjs yolu sonra

<tagmodal title ="Edit Tags" visible="showModalTag"> 
    <form role ="form"> 
      <div class="form-group"> 
       <input type="text" value="html" tagsinput/> 
      </div> 
    </form> 
</tagmodal> 

app.directive('tagsinput', function() { 
    return { 
    restrict: 'A', 
    link: function($scope, $element){ 
     $element.tagsinput(); 
    } 
    } 
}) 

Demo gibi eklenti başlatabilir bir yönergeyi kullanmaktır