góc Tuỳ chỉnh thay đổi chỉ thị giá trị thuộc tính

Question

Đấu tranh để tìm ra cách tốt nhất để xem các thay đổi thuộc tính, trong đó sẽ lý tưởng cập nhật dựa trên một sự kiện phím nhấn, ràng buộc với phạm vi trong bộ điều khiển cha mẹ

Tôi muốn mỗi 'dụ 'của chỉ thị có thuộc tính' hasFocus 'của riêng nó được thay đổi bằng cách cập nhật giá trị thuộc tính ví dụ

<menu has-focus="{{ true }}" ></menu> 
<menu has-focus="{{ false }}" ></menu> 
<menu has-focus="{{ false }}" ></menu> 

mẫu:

<div class="menu"> 
<ul> 
    <li ng-repeat="option in menu.options" ng-class="{ 'focused' : hasFocus }" tabindex="{{ $index }}"> 
     <div class="icon">{{ $index+1 }}</div> 
    </li> 
</ul> 

và do đó chỉ có 1 chỉ có thể có giá trị tương đương với 'true' cùng một lúc.

Tôi có một chỉ thị tùy chỉnh

.directive('menu', function() 
{ 
    restrict : 'E', 
    templateUrl : 'partials/menu-left.html', 
    replace : true, 
    scope : { 
     hasFocus : '@' 
    }, 
    link : function($scope, element, attrs) 
    { 
    attrs.$observe('hasFocus', function(value) { 
     console.log(value); 
    }); 
    } 

}) 

nhưng không thể dường như để trích xuất các giá trị từ $ tuân thủ phương pháp cố gắng sử dụng $ đồng hồ nhưng vẫn didnt làm việc không chắc chắn những gì tôi đang làm sai!

Answer 1

nếu bạn sử dụng @ ràng buộc, bạn có thể phải sử dụng $ xem như thế này:

$scope.$watch(function(){ 
    return attrs.hasFocus; 
}, function(val) { 
    $scope.hasFocus = val; 
}); 

nếu điều đó không làm việc, hoặc nếu bạn thích hai chiều ràng buộc với =:

<menu has-focus="true" ></menu> 

và

.directive('menu', function() 
{ 
    restrict : 'E', 
    templateUrl : 'partials/menu-left.html', 
    replace : true, 
    scope : { 
     hasFocus : '=' 
    }, 
    link : function($scope, element, attrs) 
    { 
    // $scope.hasFocus holds true/false 
    } 

}) 

tôi nghĩ hai chiều ràng buộc là tốt hơn đặc biệt là với các dữ liệu boolean b ecause nếu bạn chỉ cần nó để kiểm soát DOM trông như thế nào, thậm chí bạn có thể không cần phải theo dõi thay đổi, bạn chỉ cần cắm $ scope.hasFocus vào DOM ở đâu đó (ng-show, ng-switch, v.v. .)

EDIT: yes, tôi chỉ nhận thấy mẫu của bạn, vì vậy nếu bạn sử dụng hai chiều ràng buộc (=), bạn không cần đồng hồ