Chỉ thị góc đơn giản

Question

Tôi đang cố gắng viết chỉ thị Góc đầu tiên của mình để thêm chức năng phân trang vào ứng dụng của tôi. Tôi đang giữ nó đơn giản cho bây giờ và muốn có chỉ thị chỉ chia sẻ phạm vi của bộ điều khiển.

Trong điều khiển của tôi, tôi có một var chỉnh phạm vi được gọi là:

$scope.pages 

Bên trong chức năng liên kết chỉ thị của tôi, tôi có thể làm:

console.dir($scope) 

để xem nội dung của đối tượng phạm vi của bộ điều khiển, nhưng nếu tôi cố truy cập thuộc tính của trang, nó sẽ trở lại dưới dạng không xác định.

Tôi đang thiếu gì?

Xin cảm ơn trước.

myDirectives.directive("mdPagination", function(){ 
    return { 
     template: '', 
     restrict: 'A', 
     priority: 1000, 
     scope: false, 
     link: function($scope, el, attrs){ 
      console.dir($scope.pages); //returns undefined 
      el.text('hello world'); 
     }, 
    } 
}); 

Chỉnh sửa: Tôi biết có các mô-đun phân trang ở đó, và tôi nghĩ việc xây dựng mô hình của riêng mình là cách dễ dàng để bắt đầu học cách xây dựng chỉ thị.

Answer 1

Vấn đề bạn có là chỉ thị các hàm liên kết được chạy trước bộ điều khiển, vì vậy bạn thường không thể truy cập các giá trị phạm vi trong giai đoạn liên kết này. Có một vài cách khác để làm điều này. Cách trực tiếp nhất để giải quyết vấn đề của bạn là với $scope.$watch. Vì vậy, một cái gì đó như thế này sẽ hoạt động:

$scope.watch('pages', function(pages) { 
    console.dir(pages); 
}); 

Điều này chỉ hoạt động tốt cho việc mất hoàn cảnh. Tôi cũng sẽ đề nghị tách bộ điều khiển của bạn khỏi phạm vi nó được khai báo trong một chút bằng cách sử dụng một thuộc tính để truyền vào một biểu thức (tên thuộc tính cơ bản) cho đồng hồ của bạn. Một ví dụ đơn giản có thể trông giống như sau:

<div my-directive="myProperty"> 

link: function($scope, el, attrs) { 
    $scope.watch(attrs.myDirective, function(value) { 
    //do something you need to do with the value here 
    }); 
} 

Tuy nhiên khi bạn thêm tính phức tạp vào chỉ thị, bạn có thể muốn chỉ thị điều khiển riêng để quản lý trạng thái mà không gọi trực tiếp đồng hồ. Bộ điều khiển này có thể sử dụng phạm vi con thuộc chỉ thị với scope: true hoặc chỉ sử dụng phạm vi gốc với scope: false. Sự lựa chọn của bạn có thể sẽ phụ thuộc vào nhu cầu. Sau đó, bạn có thể có:

myDirectives.directive("mdPagination", function(){ 
    return { 
     template: '', 
     restrict: 'A', 
     priority: 1000, 
     controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { 
      console.dir($scope.pages); 

     }], 
     link: function($scope, el, attrs){ 
      $element.text('hello world'); 
     } 
    } 
}); 

Answer 2

Theo mặc định, chỉ thị chia sẻ phạm vi của nó với bộ điều khiển. Để làm điều đó, bạn không được có thuộc tính "phạm vi" trong đối tượng của mình, như:

myDirectives.directive("mdPagination", function(){ 
    return { 
     template: '', 
     restrict: 'A', 
     priority: 1000, 
     link: function($scope, el, attrs){ 
      console.dir($scope.pages); 
      el.text('hello world'); 
     }, 
    } 
}); 

Answer 3

@Sandro là đúng. Bạn đặt thuộc tính scope trong chỉ thị của mình thành false có nghĩa là phạm vi sẽ không kế thừa (hoặc chia sẻ) thuộc tính của nó với bộ điều khiển. Nếu bạn loại bỏ sai, nó sẽ làm việc như bạn dự định nó.

Các tài liệu về cách sử dụng $scope đang ở đây:. http://code.angularjs.org/1.2.0-rc.3/docs/api/ng $ rootScope.Scope

Hướng dẫn nhà phát triển để tạo ra các chỉ thị có rất nhiều thông tin tốt về làm thế nào để thiết lập chỉ thị của bạn để nó cung cấp cho bạn phạm vi bạn muốn. Các tài liệu đó có tại đây: http://code.angularjs.org/1.2.0-rc.3/docs/guide/directive

Hy vọng điều đó sẽ hữu ích.