AngularJS ràng buộc jQuery qTip2 plugin

Tôi đang cố gắng tìm ra cách liên kết nội dung của một chú giải công cụ với góc cạnh. Tôi có một chỉ thị mà trông như thế này:AngularJS ràng buộc jQuery qTip2 plugin

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

Nó sử dụng các plugin qTip2 from here

index.html của tôi trông như thế này (xin lưu ý rằng trong các tập tin thực tế tôi có bao gồm tất cả các nguồn trong đầu, tôi chỉ không dán nó vào đây để tránh lộn xộn):

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

và

button.html

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

Như bạn có thể thấy trong các mã chỉ thị. button.html được tải vào chú giải công cụ, tuy nhiên điều này ngăn cản góc hoạt động đúng cách-- Nhấp chuột ng không hoạt động khi button.html được tải vào cửa sổ bật lên. Đó là bởi vì góc cạnh không biết về nó.

Tôi cũng biết button.html đó là hợp lệ vì chỉ đơn giản là thêm

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

để index.html hoạt động tốt (tức là cách nhấp vào nút thực hiện someFunction())

Vì vậy, câu hỏi của tôi là:

Làm cách nào để gắn kết nội dung thực tế của chú giải công cụ với góc cạnh? Nếu không phải là nội dung, có cách nào để ràng buộc các tooltip để góc hiểu biết về nó? Tôi quen thuộc với phạm vi $. $ Apply() nhưng tôi không hoàn toàn chắc chắn làm thế nào để sử dụng nó ở đây.

Nguồn

2013-07-29 Naveed

Xin chào, tôi đã cập nhật câu trả lời của mình bằng một bài tập. Hy vọng nó vẫn giúp bạn. Plunkr không hoạt động tại văn phòng của tôi :-( –

CẬP NHẬT 1 Đảm bảo chuyển từ trường hợp rắn sang camelCase khi chuyển từ HTML sang javascript ở góc cạnh. Vì vậy, init-toolbar trong html dịch thành initToolbar trong javascript.

Đây là một mẫu làm việc: 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 
       } 
      }); 

      }); 

     } 
    } 
});

ORIGINAL

Lý do nút không hoạt động là do góc không biết nên liên kết với nó. Bạn nói với góc cạnh để làm điều đó bằng cách sử dụng $compile. Tôi không biết nhiều về plugin đó qTip2, nhưng nếu bạn tải mẫu, sau đó biên dịch nó $compile(template)(scope); rồi chuyển nó sang qTip2, bạn sẽ nhận được kết quả mong đợi.

Nguồn

2013-07-30 13:38:33

Nếu có thể bạn có thể đưa ra một đoạn mã nhỏ.Tôi đã đi qua tài liệu góc cạnh và họ luôn gọi $ biên dịch trên một mẫu được định nghĩa trong chỉ thị. Trong trường hợp này tôi đang đề cập đến một jqueryObject (qTip) mà không nhất thiết phải là một khuôn mẫu và cũng là nội dung bên trong trỏ đến một url (button.html). Xin lỗi tôi không rõ ràng về biên dịch $ và cách sử dụng nó. – Naveed

Vâng tôi đã cố gắng để làm cho một plunkr nhưng đối với một số lý do của nó xuống. Tôi sẽ kiểm tra sau và thử đăng nội dung nào đó. –

Từ những gì tôi hiểu vì qTip được áp dụng cho phần tử sử dụng jQuery, các thay đổi đối với đối tượng qtip trong thời gian chạy sẽ không được áp dụng. Ví dụ: nếu chúng ta thay đổi tại: bottom middle => at: top right (bằng cách chuyển đối số cho chỉ thị có lẽ) sẽ không có hiệu lực. – masimplo

AngularJS ràng buộc jQuery qTip2 plugin

Trả lời

Các vấn đề liên quan