AngularJSのボタンをクリックしてディレクティブを使用するには？

次のようにopenDialogという名前のディレクティブがあります。ボタンのクリックでビューからどのように使用できますか？ここでディレクティブAngularJSのボタンをクリックしてディレクティブを使用するには？

app.directive('openDialog', ['ngDialog', function (ngDialog) { 
    return { 
     restrict: 'A', 
     link: function ($scope, $element, $attrs) { 
      var openDialog = function() { 

       ngDialog.open({ 
        //template: $attrs.openDialog, 
        template: 'src/app/reservation/addReview.html', 
        //ngDialog.open({ template: 'src/app/reservation/addReview.html'}), 
        scope: $scope, 
        showClose: false, 
        closeByEscape:true 
       }); 
      }; 
      $element.on('click', openDialog); 
     } 
    }; 
}]);

出典

2016-09-16 chyangba

要素に対応する属性を適用することにより（これは属性ベースの情報として）。 – raina77ow

あなたのイベントを確認しました。問題はngDialog.open部分にあります。 –

のための私のコードは、あなたのコードが正しいと、このよう

<div ng-controller="ctrl"> 
 
    <mydirc></mydirc> 
 
    <button ng-click="clickMe()">call clickMe()</button> 
 
</div> 
 

 
app.directive('mydirc', function() { 
 
    return { 
 
     restrict: 'E', 
 
     replace: true, 
 
     template: '<div></div>', 
 
     link: function($scope, element, attrs) { 
 
      $scope.clickMe= function() { 
 
       alert('inside click'); 
 
      } 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

出典

2016-09-16 11:18:16

ボタンのクリックでポップアップする別のhtmlページを作ってみたい。 – chyangba

[cors]（https://www.npmjs.com/package/cors）を使用することができます。さまざまなオプションでcorsを有効にするために使用できるミドルウェアです。 – chyangba

を試してみてくださいです。

var app = angular.module('temp',['ngDialog']); 
 
\t app.controller('mainCtrl', function($scope,$http,ngDialog){ 
 
\t \t $scope.label = "ME ANGULAR, gaga!" 
 
\t }); 
 

 
\t app.directive('openDialog', ['ngDialog', function (ngDialog) { 
 
\t \t return { 
 
\t \t restrict: 'A', 
 
\t \t link: function ($scope, $element, $attrs) { 
 
\t \t  var openDialog = function() { 
 

 
\t \t   ngDialog.open({ 
 
\t \t    template: 'firstDialog', 
 
\t \t     
 
\t \t    scope: $scope, 
 
\t \t    showClose: false, 
 
\t \t    closeByEscape:true 
 
\t \t   }); 
 
\t \t  }; 
 

 
\t \t  $element.on('click', openDialog); 
 
\t \t } 
 
\t \t }; 
 
\t }]);

<!doctype html> 
 
<html lang="en" > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-ng-keypress-production</title> 
 
    
 
    <link rel="stylesheet" type="text/css" href="//likeastore.github.io/ngDialog/css/ngDialog.css"> 
 
    <link rel="stylesheet" type="text/css" href="//likeastore.github.io/ngDialog/css/ngDialog-theme-default.css"> 
 
    <link rel="stylesheet" type="text/css" href="//likeastore.github.io/ngDialog/css/ngDialog-theme-flat.css"> 
 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="//likeastore.github.io/ngDialog/js/ngDialog.min.js"></script> 
 
    
 

 
    
 
</head> 
 
<body ng-app="temp"> 
 
\t <div ng-controller="mainCtrl"> 
 
\t \t <label>{{label}}</label> 
 
\t \t <br/> 
 
\t \t <button open-Dialog>Clickme</button> 
 
\t </div> 
 
</body> 
 
    <script type="text/ng-template" id="firstDialog"> 
 
\t <div class="ngdialog-message"> 
 
\t \t <h1>Hello</h1><i>I'm ufa, you loaded me</i> 
 
\t </div> 
 
</script> 
 
</html>

出典

2016-09-16 13:03:48

AngularJSのボタンをクリックしてディレクティブを使用するには？

答えて

関連する問題