入力タグ（ブートストラップ）

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>

入力タグは、それが動作しないtagmodalに配置されます。私たちがそれをモーダルから外すと、それはうまく働いていますなぜそれがtagmodalの中で働いていないのですか？ plnkrのリンクは、いくつかのライブラリが含まれるようにするため、または、ここで角度

のそれをあるです http://plnkr.co/edit/o0BruX9oRRr0Lo5yNXIF?p=preview

出典

2016-04-11 Gagan

あなたのコードに問題が

<tagmodal>

が実際にテンプレートで、それが設定だということですいくつかのhtmlタグのhtmlから別のhtmlコードを <tagmodal>の中に追加することはできません。

すなわち、あなたが<tagmodal>

内

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

を追加することはできませんあなたが（JS内）指令コードにテンプレート内のHTML部分を追加することができます

出典

2016-04-11 09:18:16

問題がありますあなたは角度のjを使用しているので、tagsinputプラグインがのinput/select要素で自動的に初期化されるdom readyイベントの後に、モーダル内のinput要素が作成される可能性があります）。 Plunker

：

これを行うにはangularjs方法は、

<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(); 
    } 
    } 
})

デモのようなプラグインを初期化することができますディレクティブを使用することです

出典

2016-04-11 09:19:55

入力タグ（ブートストラップ）

答えて

関連する問題