chỉ thị động trong angularjs

Question

Các thuộc tính của chỉ thị không thay đổi khi phạm vi được cập nhật, chúng vẫn giữ giá trị ban đầu. Tôi đang thiếu gì ở đây?

HTML

<ul class="nav nav-pills nav-stacked" navlist> 
    <navelem href="#!/notworking/{{foo}}"></navelem> 
    <navelem href="#!/working">works great</navelem> 
</ul> 

<p>works: {{foo}}</p> 

Javascript (dựa trên các tab góc ví dụ về trước-page)

angular.module('myApp.directives', []). 
directive('navlist', function() { 
    return { 
     scope: {}, 
     controller: function ($scope) { 
      var panes = $scope.panes = []; 

      this.select = function(pane) { 
       angular.forEach(panes, function(pane) { 
        pane.selected = false; 
       }); 
       pane.selected = true; 
      } 

      this.addPane = function(pane) { 
       if (panes.length == 0) 
        this.select(pane); 
       panes.push(pane); 
      } 

     } 
    } 
}). 
directive('navelem', function() { 
    return { 
     require: '^navlist', 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     scope: { href: '@href' }, 
     link: function(scope, element, attrs, tabsCtrl) { 
      tabsCtrl.addPane(scope); 
      scope.select = tabsCtrl.select; 
     }, 
     template: 
      '<li ng-class="{active: selected}" ng-click="select(this)"><a href="{{href}}" ng-transclude></a></li>' 
    }; 
}); 

Answer 1

Bằng việc xác định scope: {} trong Chỉ thị của bạn, nó đang tạo ra một isolated scope. Vì vậy, phạm vi phụ huynh hiện không nhìn thấy được từ chỉ thị.

Nếu bạn muốn tham chiếu phạm vi gốc, bạn có thể đặt scope: true để chia sẻ phạm vi (trong cùng một chỉ thị) và bỏ qua khai báo phạm vi cho việc lồng phạm vi bình thường. Hoặc nếu bạn muốn chỉ giới thiệu $scope.foo của phụ huynh, bạn có thể xác định biến phạm vi rõ ràng như bạn đã thực hiện trong chỉ thị con.

Answer 2

Có ba loại phạm vi thừa kế chỉ thị:

1. Không 'phạm vi: ...' hoặc rõ ràng scope: false - không có phạm vi mới được tạo ra. Chỉ thị sử dụng cùng phạm vi với phụ huynh. Điều này rất đơn giản và thuận tiện, nhưng nếu bạn xây dựng các thành phần có thể tái sử dụng, điều này không được khuyến khích, vì chỉ thị sẽ chỉ có thể sử dụng nếu phạm vi cha mẹ có các thuộc tính phạm vi nhất định được xác định rằng chỉ thị cần sử dụng/truy cập.
2. scope: true - tạo phạm vi mới, được chia sẻ bởi tất cả các chỉ thị trên cùng một phần tử, với thừa kế nguyên mẫu thông thường của phạm vi gốc. Một lần nữa, có lẽ không phải là lựa chọn tốt nhất cho các thành phần tái sử dụng, vì chỉ thị có lẽ không nên truy cập vào các thuộc tính phạm vi cha - nó có thể vô tình thay đổi một cái gì đó trong phụ huynh.
3. scope: { ... } - tạo phạm vi "cô lập" mới - nó không được thừa kế nguyên mẫu từ phạm vi gốc. Tuy nhiên, đối tượng băm (tức là, {...}) cho phép chúng tôi xác định các thuộc tính phạm vi chỉ thị cục bộ có nguồn gốc từ phạm vi gốc - vì vậy chúng tôi có thể kiểm soát các thuộc tính được chia sẻ và cách thực hiện.
   1. Sử dụng '=' cho liên kết 2 chiều mạnh mẽ giữa thuộc tính phạm vi gốc và thuộc tính phạm vi chỉ thị - thay đổi đối với thuộc tính phạm vi ảnh hưởng đến thuộc tính khác.
   2. Sử dụng '@' để ràng buộc giá trị thuộc tính của cha mẹ với thuộc tính phạm vi chỉ thị. Đây là bản chất ràng buộc 1 chiều. Chỉ những thay đổi phạm vi gốc mới ảnh hưởng đến phạm vi chỉ thị.
   3. Sử dụng '&' để liên kết với các biểu thức/hàm phạm vi gốc.

Đối với vấn đề cụ thể của bạn, bạn cần phải chỉ rõ trong các đối tượng băm mà tính chất phạm vi bạn muốn có 2 chiều ràng buộc.

Để biết thêm về phạm vi chỉ thị (bao gồm cả hình ảnh), vui lòng xem phần chỉ đây: What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

Answer 3

Giống như Đánh dấu Rajcok nói - Phạm vi: {} sẽ tạo ra một phạm vi cô lập mới mà không kế thừa các thuộc tính từ cha mẹ , tuy nhiên chúng tôi vẫn có thể truy cập vào các thuộc tính này bằng cách sử dụng thuộc tính cha mẹ $.

Bộ điều khiển:

app.controller('indexController', function($scope) { 
    $scope.test="Hello world!"; 
}); 

Chỉ

app.directive("test", function() { 
    return{ 
     restrict: "A", 
     scope: {}, 
     controller: function($scope){ 
      console.log("directiv $scope.$parent.test: " + $scope.$parent.test); 
      console.log("directiv $scope.test: " + $scope.test); 
     } 
    }; 
}); 

đầu ra:

directiv $scope.$parent.test: Hello world! 
directiv $scope.test: undefined