AngularJS chỉ thị tùy chỉnh ng-show/ng-hide

Question

Cảnh báo: Người mới tham gia về phía trước.

Tôi đang cố gắng tạo tiện ích con tùy chỉnh sẽ hiển thị theo mặc định là liên kết "Trả lời" và khi được nhấp, nó sẽ bị ẩn và vùng văn bản sẽ được hiển thị. Đây là những gì tôi có cho đến nay, nhưng nó không hoạt động ::

.directive('replybox', function ($rootScope) { 
    var linkFn = function (scope, element, attrs) { 
     var label = angular.element(element.children()[0]); 
     scope.showInput = false; 

     label.bind("click", textbox); 

     function textbox() { 
      scope.showInput = true; 
     } 
    }; 
    return { 
     link:linkFn, 
     restrict:'E', 
     scope:{ 
      id:'@', 
      label:'@', 
      showInput:'=' 
     }, 
     template:'<a ng-hide="showInput">label</a><textarea ng-show="showInput"> </textarea>', 
     transclude:true 
    }; 
}) 

Bất kỳ hướng dẫn nào cũng sẽ được đánh giá cao. Cảm ơn!

Answer 1

Matias, đây là một jsFiddle làm việc: http://jsfiddle.net/pkozlowski_opensource/Z6RzD/

Có số điều đang xảy ra thực sự, nhưng tôi nghĩ rằng điều quan trọng nhất là thực tế là bạn cần phải sử dụng Phạm vi $ áp dụng để có thông báo góc. phạm vi thay đổi từ 'bên ngoài thế giới của thế giới'. Theo mặc định góc không kích hoạt các mẫu đánh giá lại trên mỗi và mọi sự kiện DOM, do đó bạn cần phải quấn nó vào áp dụng:

scope.$apply('showInput = true'); 

Thông tin thêm ở đây: http://docs.angularjs.org/api/ng . $ rootScope.Scope

Ngoài ra còn có các mặt hàng khác cần lưu ý trong ví dụ của bạn:

• tôi đoán bạn muốn để có thể vượt qua 'nhãn' như một thuộc tính để chỉ thị của bạn và sau đó sử dụng nó trong mẫu của bạn - nếu bạn cần sử dụng biểu thức {{label}}
• Tôi đã không hoàn toàn chắc chắn những gì sẽ được sử dụng cho các 'id' thuộc tính để bỏ qua nó từ fiddle của tôi
• Tương tự cho 'showInput' - không thể tìm ra những gì bạn đang cố gắng để có được

Answer 2

bạn cũng ca sử dụng $ timeout để thông báo cho góc thay đổi của bạn như

.directive('replybox', function($rootScope, $timeout) { 
    var linkFn = function(scope, element, attrs) { 
    var label = angular.element(element.children()[0]); 
    scope.showInput = false; 

    label.bind("click", textbox); 

    function textbox() { 
    $timeout(function() { 
     scope.showInput = true; 
    }); 

    } 
}; 
return { 
    link: linkFn, 
    restrict: 'E', 
    scope: { 
    id: '@', 
    label: '@', 
    showInput: '=' 
    }, 
    template: '<a ng-hide="showInput">label</a><textarea ng-show="showInput"> </textarea>', 
    transclude: true 
}; 
});