AngularJS - truy cập các thuộc tính chỉ thị cha mẹ từ các chỉ thị con

Điều này không quá khó để làm nhưng tôi không thể tìm ra cách tốt nhất để làm điều đó.AngularJS - truy cập các thuộc tính chỉ thị cha mẹ từ các chỉ thị con

Tôi có một chỉ thị phụ huynh, như vậy:

directive('editableFieldset', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     model: '=' 
    }, 
    replace: true, 
    transclude: true, 

    template: ' 
     <div class="editable-fieldset" ng-click="edit()"> 
     <div ng-transclude></div> 

     ... 

     </div>', 

    controller: ['$scope', function ($scope) { 
     $scope.edit = -> 
     $scope.editing = true 

     // ... 
    ] 
    }; 
});

Và một chỉ con:

.directive('editableString', function() { 
    return { 
    restrict: 'E', 
    replace: true, 

    template: function (element, attrs) { 
     '<div> 
     <label>' + attrs.label + '</label> 
     <p>{{ model.' + attrs.field + ' }}</p> 

     ... 
     </div>' 
    }, 
    require: '^editableFieldset' 
    }; 
});

Làm thế nào tôi có thể dễ dàng truy cập vào model và editing tính chất của chỉ thị mẹ từ chỉ con ? Trong hàm liên kết của tôi, tôi có quyền truy cập vào phạm vi gốc - tôi có nên sử dụng $watch để xem các thuộc tính này không?

Đặt lại với nhau, những gì tôi muốn có là:

<editable-fieldset model="myModel"> 
    <editable-string label="Some Property" field="property"></editable-string> 
    <editable-string label="Some Property" field="property"></editable-string> 
</editable-fieldset>

Ý tưởng là để có một tập hợp các lĩnh vực hiển thị theo mặc định. Nếu được nhấp vào, chúng sẽ trở thành dữ liệu đầu vào và có thể được chỉnh sửa.

Nguồn

2013-11-26 Rahul Sekhar

Bạn có thể đưa ra ví dụ về đánh dấu cuối cùng sẽ trông như thế nào không? –

Tôi đã đặt rằng bây giờ –

Lấy cảm hứng từ this SO post, tôi đã có giải pháp làm việc here in this plunker.

Tôi phải thay đổi khá nhiều. Tôi đã chọn có một phạm vi biệt lập trên editableString cũng vì nó dễ ràng buộc hơn trong các giá trị chính xác cho mẫu. Nếu không, bạn sẽ phải sử dụng compile hoặc phương thức khác (như dịch vụ $transclude).

Dưới đây là kết quả:

JS:

var myApp = angular.module('myApp', []); 

myApp.controller('Ctrl', function($scope) { 

    $scope.myModel = { property1: 'hello1', property2: 'hello2' } 

}); 


myApp.directive('editableFieldset', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     model: '=' 
    }, 
    transclude: true, 
    replace: true, 
    template: '<div class="editable-fieldset" ng-click="edit()"><div ng-transclude></div></div>', 
    link: function(scope, element) { 
     scope.edit = function() { 

     scope.editing = true; 
     } 
    }, 
    controller: ['$scope', function($scope) { 

     this.getModel = function() { 
     return $scope.model; 
     } 

    }] 
    }; 
}); 

myApp.directive('editableString', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     label: '@', 
     field: '@' 
    }, 
    template: '<div><label>{{ label }}</label><p>{{ model[field] }}</p></div>', 
    require: '^editableFieldset', 
    link: function(scope, element, attrs, ctrl) { 

     scope.model = ctrl.getModel(); 
    } 
    }; 
});

HTML:

<body ng-controller="Ctrl"> 
    <h1>Hello Plunker!</h1> 
    <editable-fieldset model="myModel"> 
     <editable-string label="Some Property1:" field="property1"></editable-string> 
     <editable-string label="Some Property2:" field="property2"></editable-string> 
    </editable-fieldset> 
    </body>

Nguồn

2013-11-26 11:14:14

Cảm ơn bạn. Điều này thực sự không giúp truy cập vào thuộc tính động, như 'chỉnh sửa'. Tôi đoán tôi sẽ phải sử dụng '$ watch' để theo dõi điều đó trong chỉ thị của con tôi? –

Ngoài ra, tôi sẽ nghĩ cho các thuộc tính không đổi, không thay đổi như 'field' và' label' ở đây, chuyển chúng đến một hàm tạo mẫu sẽ nhanh hơn việc thêm chúng dưới dạng các ràng buộc? Không cần phải lãng phí thời gian trên mỗi chu kỳ kiểm tra tiêu hóa cho những ràng buộc đó sẽ không thay đổi, phải không? –

Không chỉnh sửa thuộc tính của trẻ? Hay bạn chỉ muốn chỉnh sửa một đứa trẻ cùng một lúc? –

Bạn có thể truy cập để điều khiển cha mẹ bằng cách đi qua thuộc tính trong chức năng liên kết chỉ thị con

link: function (scope, element, attrs, parentCtrl) { 
    parentCtrl.$scope.editing = true; 
}

Nguồn

2013-11-26 11:15:04 user3036090

bạn nhận được thông số thứ tư này nếu bạn: ... yêu cầu: "^ parentCtrl" – Leonardo

Có và khái niệm được giải thích trong phần "** Tạo chỉ thị giao tiếp **" trong tài liệu hướng dẫn [link] (https : //docs.angularjs.org/guide/directive) – Harish

AngularJS - truy cập các thuộc tính chỉ thị cha mẹ từ các chỉ thị con

Trả lời

Các vấn đề liên quan