Có bài đăng kết xuất gọi lại cho chỉ thị Angular JS không?

Tôi vừa nhận được chỉ thị của mình để lấy một mẫu để nối vào phần tử của nó như thế này:

# CoffeeScript
.directive 'dashboardTable', ->
  controller: lineItemIndexCtrl
  templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
  (scope, element, attrs) ->
    element.parent('table#line_items').dataTable()
    console.log 'Just to make sure this is run'

# HTML
<table id="line_items">
    <tbody dashboard-table>
    </tbody>
</table>

Tôi cũng đang sử dụng một Plugin jQuery có tên là DataTables. Cách sử dụng chung của nó là như thế này: $ ('bảng # some_id'). DataTable (). Bạn có thể chuyển dữ liệu JSON vào lệnh gọi dataTable () để cung cấp dữ liệu bảng HOẶC bạn có thể có dữ liệu trên trang và nó sẽ làm phần còn lại .. Tôi đang thực hiện sau, có các hàng đã có trên trang HTML .

Nhưng vấn đề là tôi phải gọi dataTable () trên bảng # line_items SAU DOM đã sẵn sàng. Lệnh của tôi ở trên gọi phương thức dataTable () TRƯỚC KHI mẫu được gắn vào phần tử của lệnh. Có cách nào để tôi có thể gọi các chức năng SAU khi nối thêm không?

Cảm ơn sự giúp đỡ của bạn!

CẬP NHẬT 1 sau câu trả lời của Andy:

Tôi muốn đảm bảo rằng phương thức liên kết chỉ được gọi là SAU mọi thứ đều có trên trang vì vậy tôi đã thay đổi chỉ thị cho một thử nghiệm nhỏ:

# CoffeeScript
#angular.module(...)
.directive 'dashboardTable', ->
    {
      link: (scope,element,attrs) -> 
        console.log 'Just to make sure this gets run'
        element.find('#sayboo').html('boo')

      controller: lineItemIndexCtrl
      template: "<div id='sayboo'></div>"

    }

Và tôi thực sự thấy "boo" trong div # sayboo.

Sau đó, tôi thử cuộc gọi dữ liệu jquery của tôi

.directive 'dashboardTable',  ->
    {
      link: (scope,element,attrs) -> 
        console.log 'Just to make sure this gets run'
        element.parent('table').dataTable() # NEW LINE

      controller: lineItemIndexCtrl
      templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
    }

Không có may mắn ở đó

Sau đó, tôi cố gắng thêm thời gian chờ:

.directive 'dashboardTable', ($timeout) ->
    {
      link: (scope,element,attrs) -> 
        console.log 'Just to make sure this gets run'
        $timeout -> # NEW LINE
          element.parent('table').dataTable()
        ,5000
      controller: lineItemIndexCtrl
      templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
    }

Và nó hoạt động. Vì vậy, tôi tự hỏi những gì sai trong phiên bản không hẹn giờ của mã?

Nếu tham số thứ hai, "độ trễ" không được cung cấp, hành vi mặc định là thực thi chức năng sau khi DOM hoàn thành kết xuất. Vì vậy, thay vì setTimeout, hãy sử dụng $ timeout:

$timeout(function () {
    //DOM has finished rendering
});

Tôi đã có cùng một vấn đề và tôi tin rằng câu trả lời thực sự là không. Xem bình luận của Miško và một số thảo luận trong nhóm .

Angular có thể theo dõi rằng tất cả các hàm gọi nó để thao tác DOM đã hoàn tất, nhưng vì các hàm đó có thể kích hoạt logic async vẫn đang cập nhật DOM sau khi chúng quay trở lại, nên Angular không thể biết về nó. Bất kỳ cuộc gọi lại nào mà Angular đưa ra đôi khi có thể hoạt động, nhưng sẽ không an toàn khi dựa vào.

Chúng tôi đã giải quyết vấn đề này bằng một setTimeout, như bạn đã làm.

(Xin lưu ý rằng không phải ai cũng đồng ý với tôi - bạn nên đọc các nhận xét về các liên kết ở trên và xem bạn nghĩ gì.)

Bạn có thể sử dụng chức năng 'liên kết', còn được gọi là postLink, chạy sau khi mẫu được đưa vào.

app.directive('myDirective', function() {
  return {
    link: function(scope, elm, attrs) { /*I run after template is put in */ },
    template: '<b>Hello</b>'
  }
});

Hãy đọc nó nếu bạn có kế hoạch thực hiện các chỉ thị, đó là một sự trợ giúp lớn: http://docs.angularjs.org/guide/directive

Mặc dù câu trả lời của tôi không liên quan đến các cơ sở dữ liệu, nhưng nó giải quyết vấn đề thao tác DOM và ví dụ: khởi tạo plugin jQuery cho các lệnh được sử dụng trên các phần tử có nội dung được cập nhật theo cách không đồng bộ.

Thay vì thực hiện thời gian chờ, người ta chỉ có thể thêm một chiếc đồng hồ sẽ lắng nghe những thay đổi nội dung (hoặc thậm chí bổ sung các kích hoạt bên ngoài).

Trong trường hợp của tôi, tôi đã sử dụng cách giải quyết này để khởi tạo plugin jQuery sau khi lặp lại ng đã tạo ra DOM bên trong của tôi - trong trường hợp khác tôi đã sử dụng nó để chỉ thao tác DOM sau khi thuộc tính scope bị thay đổi tại bộ điều khiển. Đây là cách tôi đã làm ...

HTML:

<div my-directive my-directive-watch="!!myContent">{{myContent}}</div>

JS:

app.directive('myDirective', [ function(){
    return {
        restrict : 'A',
        scope : {
            myDirectiveWatch : '='
        },
        compile : function(){
            return {
                post : function(scope, element, attributes){

                    scope.$watch('myDirectiveWatch', function(newVal, oldVal){
                        if (newVal !== oldVal) {
                            // Do stuff ...
                        }
                    });

                }
            }
        }
    }
}]);

Lưu ý: Thay vì chỉ truyền biến myContent thành bool tại thuộc tính my-directive-watch, người ta có thể tưởng tượng bất kỳ biểu thức tùy ý nào ở đó.

Lưu ý: Việc cách ly phạm vi như trong ví dụ trên chỉ có thể được thực hiện một lần cho mỗi phần tử - cố gắng thực hiện điều này với nhiều lệnh trên cùng một phần tử sẽ dẫn đến $ compile: multidir Error - xem: https://docs.angularjs.org / lỗi / $ biên dịch / multidir

Có thể là muộn để trả lời câu hỏi này. Nhưng vẫn có ai đó có thể nhận được lợi ích từ câu trả lời của tôi.

Tôi đã gặp vấn đề tương tự và trong trường hợp của tôi, tôi không thể thay đổi chỉ thị vì đó là thư viện và thay đổi mã của thư viện không phải là một thực tiễn tốt. Vì vậy, những gì tôi đã làm là sử dụng một biến để chờ tải trang và sử dụng ng-if bên trong html của tôi để chờ kết xuất phần tử cụ thể.

Trong bộ điều khiển của tôi:

$scope.render=false;

//this will fire after load the the page

angular.element(document).ready(function() {
    $scope.render=true;
});

Trong html của tôi (trong trường hợp thành phần html của tôi là một canvas)

<canvas ng-if="render"> </canvas>

Tôi đã cùng một vấn đề, nhưng sử dụng góc + DataTable với một fnDrawCallback+ nhóm hàng + $ chỉ lồng nhau biên soạn. Tôi đã đặt $ timeout trong fnDrawCallbackhàm của mình để sửa lỗi hiển thị phân trang.

Trước ví dụ, dựa trên nguồn row_grouping:

var myDrawCallback = function myDrawCallbackFn(oSettings){
  var nTrs = $('table#result>tbody>tr');
  for(var i=0; i<nTrs.length; i++){
     //1. group rows per row_grouping example
     //2. $compile html templates to hook datatable into Angular lifecycle
  }
}

Sau ví dụ:

var myDrawCallback = function myDrawCallbackFn(oSettings){
  var nTrs = $('table#result>tbody>tr');
  $timeout(function requiredRenderTimeoutDelay(){
    for(var i=0; i<nTrs.length; i++){
       //1. group rows per row_grouping example
       //2. $compile html templates to hook datatable into Angular lifecycle
    }
  ,50); //end $timeout
}

Ngay cả một khoảng thời gian chờ ngắn cũng đủ để cho phép Angular đưa ra các chỉ thị Angular đã biên dịch của tôi.

Không có giải pháp nào hiệu quả đối với tôi chấp nhận sử dụng thời gian chờ. Điều này là do tôi đang sử dụng một mẫu được tạo động trong quá trình postLink.

Tuy nhiên, xin lưu ý, có thể có thời gian chờ là '0' vì thời gian chờ thêm chức năng được gọi vào hàng đợi của trình duyệt sẽ xuất hiện sau công cụ kết xuất góc vì điều này đã có trong hàng đợi.

Tham khảo điều này: http://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering

Dưới đây là một lệnh để có các hành động được lập trình sau khi kết xuất nông. Bằng cách nông, tôi có nghĩa là nó sẽ đánh giá sau khi chính yếu tố đó được kết xuất và điều đó sẽ không liên quan đến khi nào nội dung của nó được hiển thị. Vì vậy, nếu bạn cần một số yếu tố phụ thực hiện hành động kết xuất bài đăng, bạn nên xem xét sử dụng nó ở đó:

define(['angular'], function (angular) {
  'use strict';
  return angular.module('app.common.after-render', [])
    .directive('afterRender', [ '$timeout', function($timeout) {
    var def = {
        restrict : 'A', 
        terminal : true,
        transclude : false,
        link : function(scope, element, attrs) {
            if (attrs) { scope.$eval(attrs.afterRender) }
            scope.$emit('onAfterRender')
        }
    };
    return def;
    }]);
});

sau đó bạn có thể làm:

<div after-render></div>

hoặc với bất kỳ biểu thức hữu ích nào như:

<div after-render="$emit='onAfterThisConcreteThingRendered'"></div>

Tôi đã làm việc này với chỉ thị sau:

app.directive('datatableSetup', function () {
    return { link: function (scope, elm, attrs) { elm.dataTable(); } }
});

Và trong HTML:

<table class="table table-hover dataTable dataTable-columnfilter " datatable-setup="">

rắc rối chụp nếu ở trên không làm việc cho bạn.

1) lưu ý rằng 'datablesetup' tương đương với 'datable-setup'. Angular thay đổi định dạng thành trường hợp lạc đà.

2) đảm bảo rằng ứng dụng được xác định trước lệnh. ví dụ định nghĩa ứng dụng đơn giản và chỉ thị.

var app = angular.module('app', []);
app.directive('datatableSetup', function () {
    return { link: function (scope, elm, attrs) { elm.dataTable(); } }
});

Theo sau thực tế là thứ tự tải không thể dự đoán được, một giải pháp đơn giản có thể được sử dụng.

Chúng ta hãy nhìn vào chỉ thị - 'người sử dụng mối quan hệ của chỉ thị'. Thông thường người sử dụng lệnh sẽ cung cấp một số dữ liệu cho lệnh hoặc sử dụng một số chức năng (chức năng) của các lệnh cung cấp. Mặt khác, lệnh này mong muốn một số biến được xác định trên phạm vi của nó.

Nếu chúng ta có thể đảm bảo rằng tất cả người chơi có tất cả các yêu cầu hành động của họ được thực hiện trước khi họ cố gắng thực hiện những hành động đó - mọi thứ sẽ ổn.

Và bây giờ chỉ thị:

app.directive('aDirective', function () {
    return {
        scope: {
            input: '=',
            control: '='
        },
        link: function (scope, element) {
            function functionThatNeedsInput(){
                //use scope.input here
            }
            if ( scope.input){ //We already have input 
                functionThatNeedsInput();
            } else {
                scope.control.init = functionThatNeedsInput;
            }
          }

        };
})

và bây giờ là người sử dụng lệnh html

<a-directive control="control" input="input"></a-directive>

và ở đâu đó trong bộ điều khiển của thành phần sử dụng lệnh:

$scope.control = {};
...
$scope.input = 'some data could be async';
if ( $scope.control.functionThatNeedsInput){
    $scope.control.functionThatNeedsInput();
}

Đó là về nó. Có rất nhiều chi phí nhưng bạn có thể mất $ timeout. Chúng tôi cũng giả định rằng thành phần sử dụng lệnh được khởi tạo trước lệnh này bởi vì chúng tôi phụ thuộc vào biến điều khiển để tồn tại khi lệnh được khởi tạo.