Câu hỏi mới bắt đầu với AngularJS và chỉ thị - gói một thành phần jQuery

Question

Trước tiên, tôi nên đề cập đến tôi chỉ đang làm việc để chuyển sang lập trình khách hàng. Tôi rất mới với js. Kinh nghiệm trước đây của tôi là chủ yếu trong C và một số lắp ráp. Tôi cũng đã làm một chút rất đơn giản php năm trước khi nó vẫn còn 4.0. Vì vậy, trong ngắn hạn, mới để javascript nhưng đặt đầu của tôi xung quanh nó một chút.

Tôi đã thực hiện khá nhiều tìm kiếm và ẩn nấp nhưng không thể khắc phục được sự cố của mình.

Tôi đang tìm ra một số khái niệm cơ bản của AngularJS và nó khá là đẹp, nhưng tôi gặp khó khăn khi gói đầu xung quanh cách các chỉ thị hoạt động và cách truy cập dữ liệu từ các điều khiển tùy chỉnh.

Ngắn câu chuyện ngắn Tôi đang cố gắng thực hiện một điều khiển tùy chỉnh cho bootstrap làm việc với angularjs vì vậy tôi có thể sử dụng nó trong các hình thức đúng cách.

Dưới đây là kiểm soát: http://tarruda.github.com/bootstrap-datetimepicker/

Tôi có một số điều khiển khác mà tôi muốn làm cho công việc nhưng tôi hình dung nếu tôi có thể có được một này đi tôi có lẽ có thể nhận được những người khác một cách dễ dàng đủ.

Đây là một liên kết đến một khuôn khổ cơ bản những gì tôi có vào thời điểm này: http://jsfiddle.net/uwC9k/6/

Trước hết, tôi đang cố gắng để quấn quanh đầu tôi làm thế nào để khởi sự kiểm soát một khi tôi có mẫu làm việc (Trong đó, tôi khá nhiều vào thời điểm này tôi nghĩ)

link: function(scope, element, attr) { 
      attr.$observe('dpid', function(value) { 
       if(value) { 
       $('#' + scope.dpid).datetimepicker({ 
        language: 'en', 
        pick12HourFormat: true 
      }); 
} 

Khi tôi đặt điều đó trong chỉ thị liên kết, nó không có gì. Tôi thậm chí không thấy bất kỳ lỗi nào. scope.dpid thực sự hiển thị ID của điều khiển vì vậy tôi nghĩ nó sẽ hoạt động. Nhưng than ôi, sự hiểu biết febble của tôi về javascript cho tôi biết rằng tôi ở bên ngoài phạm vi hoặc một số điều vô nghĩa như vậy mà tôi không thể truy cập vào phần tử.

Khi tôi nhận được điều đó, tôi không chắc chắn chính xác cách làm cho dữ liệu này có thể truy cập được dưới dạng.

Bất kỳ trợ giúp nào được đánh giá cao.

Cập nhật Có bit cơ bản hoạt động, bây giờ tôi cần biết cách lấy dữ liệu từ điều khiển mới vào bộ điều khiển của mình. Đây là một liên kết đến jsfiddle mới được cập nhật. http://jsfiddle.net/tmZDY/1/

Cập nhật 2 Tôi nghĩ rằng tôi có một ý tưởng về cách làm cho dữ liệu này dễ tiếp cận nhưng kiến ​​thức còn thiếu của tôi về javascript đã để lại cho tôi khô lại.

khi tôi tạo đối tượng, tôi làm như vậy.

var elDatepicker = element.datetimepicker({ 
language : 'en', 
pick12HourFormat : true, 
}); 

Tuy nhiên, khi tôi cố gắng sử dụng đối tượng này có vẻ như không đúng, hoặc tôi chỉ thiếu một số kiến ​​thức cơ bản. Dù bằng cách nào thì điều này chắc chắn làm tôi cảm thấy ngu ngốc.

console.log(elDatepicker.getDate()); 

Điều này không thành công, getDate thực sự là một phương pháp, ít nhất có vẻ như nó nằm trong mã của plugin.

Answer 1

Thay vì phạm vi cách ly, bạn có thể find() mẫu div đầu tiên của mẫu và sau đó áp dụng datetimepicker().Vì vậy, bạn không cần một id trong HTML của bạn:

<datepicker model="mydate"></datepicker> 
mydate = {{mydate}} 

Tôi cũng đề nghị replace: true:

.directive('datepicker', function ($parse) { 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<div class=\"well\"><div class=\"input-append\">' 
     + '<input data-format=\"MM/dd/yyyy HH:mm:ss PP\" type=\"text\"></input>' 
     + '<span class=\"add-on\"><i data-time-icon=\"icon-time\" data-date-icon=\"icon-calendar\"></i></span>' 
     + '</div></div>', 
     link: function (scope, element, attr) { 
      var picker = element.find('div').datetimepicker({ 
       language: 'en', 
       pick12HourFormat: true 
      }); 
      var model = $parse(attrs.model); 
      picker.on('changeDate', function(e) { 
       console.log(e.date.toString()); 
       console.log(e.localDate.toString()); 
       model.assign(scope, e.date.toString()); 
       scope.$apply(); 
      }); 
     } 
    }; 
}) 

Fiddle

$parse là một chút khéo léo. Những gì tôi hiển thị là trường hợp sử dụng chính cho nó: chúng tôi phân tích một thuộc tính và lấy lại một hàm có phương thức assign() trên đó cho phép chúng tôi thay đổi thuộc tính phạm vi.

Answer 2

Một trong những cách để làm có thể là điều này, như thể hiện trong fiddle này. http://jsfiddle.net/uwC9k/10/

Vì phần tử datepicker phải được thay thế bằng chuỗi mẫu, đây sẽ là trường hợp sử dụng tốt để sử dụng hàm biên dịch. Vì vậy, bên trong hàm biên dịch im thay thế phần tử datepicker bằng chuỗi mẫu.

Khi quá trình biên dịch hoàn thành, chúng tôi sẽ chuyển đến hàm liên kết, không có gì ngoài chức năng được trả về từ bên trong hàm biên dịch. Những gì các chức năng liên kết sẽ làm là để khởi tạo <div class=\"input-append\"> yếu tố này với chức năng cập nhật bảng chọn sử dụng

element.datetimepicker({ 
         language: 'en', 
         pick12HourFormat: true 
       }); 

Vì bạn đang kể cả jquery, thuộc tính nguyên tố trong các chức năng liên kết là một yếu tố jquery warpped. Vì vậy, bạn có thể ngay lập tức gọi phương thức datetimepicker.

Answer 3

Bạn có thể thêm một lớp như datetimepicker vào div mà phải được chuyển đổi thành bộ đếm dữ liệu, sau đó sử dụng lớp đó để tìm kiếm phần tử.

.directive('datepicker', function() { 
    return { 
     restrict: 'E', 
     template: '<div class=\"well\"><div id={{dpid}} class=\"input-append datetimepicker\"><input data-format=\"MM/dd/yyyy HH:mm:ss PP\" type=\"text\"></input> <span class=\"add-on\"><i data-time-icon=\"icon-time\" data-date-icon=\"icon-calendar\">  </i> </span> </div></div>', 
     scope: { dpid: '@'}, 
     link: function(scope, element, attr) { 
      attr.$observe('dpid', function(value) { 
       if(value) { 
       $(element).find('.datetimepicker').datetimepicker({ 
        language: 'en', 
        pick12HourFormat: true 
      }); 
       } 
      }); 
     } 
    }; 
}) 

Demo: Fiddle