11

ツールチップのコンテンツを角度付きでバインドする方法を見つけようとしています。次のようなディレクティブがあります。

script.js

var myApp = angular.module('myApp', []);

myApp.directive('initToolbar', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
            $(element).qtip({
                content: {
                    ajax:
                    {
                        url: 'button.html'
                    }
                },
                position: {
                    my: 'bottom left',
                    at: 'bottom middle',
                    target: $(element)
                },
                hide: {
                    fixed : true,
                    delay : 1000
                }
            });
        }
    }
});

ここからqTip2プラグインを使用します

私の index.html は次のようになります (実際のファイルにはすべてのソースが含まれていることに注意してください。混乱を避けるためにここに貼り付けているわけではありません)。

<body>
    <div initToolbar>
        <p>
            Hover over me. Hover over me. Hover over me.
        </p>
    </div>
</body>

と

ボタン.html

<div ng-controller="myController">
    <button ng-click="someFunction()">Click me</button>
</div>

ディレクティブ コードでわかるように。button.html はツールチップに読み込まれますが、これにより angular が正しく機能しなくなります。button.html がポップアップに読み込まれると、ng-click が機能しません。これは、角度がそれを認識していないためです。

単に追加するだけなので、button.htmlが有効であることも知っています

<ng-include src="'button.html'">

index.html への変換は正常に機能します (つまり、ボタンをクリックすると someFunction() が実行されます)。

だから私の質問は：

ツールチップの実際のコンテンツを角度付きでバインドするにはどうすればよいですか? コンテンツではない場合、角度がそれを認識できるようにツールチップをバインドする方法はありますか? 私は $scope.$apply() に精通していますが、ここでの使用方法がよくわかりません。

4

1 に答える 1

15

更新 1 角度で HTML から javascript に移行するときは、必ずスネーク ケースからキャメルケースに移行してください。したがってinit-toolbar、htmlinitToolbarは javascript に変換されます。

これが実際のサンプルです: http://plnkr.co/edit/l2AJmU?p=preview

HTML

<div init-toolbar="">
  <p>
    Hover over me. Hover over me. Hover over me.
  </p>
</div>

Button.html

<div>
  <button ng-click="someFunction()">Click me</button>
</div>

ジャバクリップ

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.someFunction = function() {
    $scope.name = 'FOO BAR';
  };
});

app.directive('initToolbar', function($http, $compile, $templateCache){
    return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
          $http.get('button.html', {cache: $templateCache}).
            success(function(content) {
              var compiledContent = $compile(content)(scope);

              $(element).qtip({
                content: compiledContent,
                position: {
                  my: 'bottom left',
                  at: 'bottom middle',
                  target: $(element)
                },
                hide: {
                  fixed : true,
                  delay : 1000
              }
            });

          });

        }
    }
});

オリジナル

ボタンが機能しない理由は、角度がボタンにバインドする必要があることを認識していないためです。$compileを使用してAngularにそれを行うように指示します。その qTip2 プラグインについてはよくわかりませんが、テンプレートをロードしてコンパイルし、それ $compile(template)(scope);を qTip2 に渡すと、期待どおりの結果が得られます。

于 2013-07-30T13:38:33.757 に答える