Угловое связывание jQuery плагин qTip2

Я пытаюсь выяснить, как связать содержимое всплывающей подсказки с angular. У меня есть директива, которая выглядит так:

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>

и

button.html

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

Как вы можете видеть в директивном коде. button.html загружается в всплывающую подсказку, однако это предотвращает корректное функционирование функции angular. Щелчок ng не работает, когда button.html загружается во всплывающее окно. Это потому, что angular не знает об этом.

Я также знаю, что button.html действителен, потому что просто добавляет

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

to index.html отлично работает (например, нажатие кнопки выполняет функцию someFunction())

Итак, мой вопрос:

Как связать фактическое содержимое всплывающей подсказки с angular? Если нет содержимого, есть ли способ привязать всплывающую подсказку, чтобы angular знал об этом? Я знаком с $scope. $Apply(), но я не совсем уверен, как его использовать здесь.

Ответы

Ответ 1

ОБНОВЛЕНИЕ 1 Обязательно переходите от змеиного футляра к camelCase при переходе с HTML на javascript в angular. Итак, init-toolbar в html переводит на initToolbar в 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>

Javacript

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

          });

        }
    }
});

ОРИГИНАЛ

Причина, по которой кнопка не работает, связана с тем, что angular не знает, что она должна привязываться к ней. Вы скажете angular сделать это с помощью $compile. Я мало знаю об этом qTip2 pluggin, но если вы загрузите шаблон, затем скомпилируйте его $compile(template)(scope);, а затем передайте его qTip2, вы получите ожидаемые результаты.