Angularjs: đặt phụ huynh giá trị phạm vi chỉ thị với chỉ thị con

Question

Tôi không chắc chắn đây là cách để làm điều này, nhưng mục tiêu của tôi là như sau:

• Tôi có một chỉ thị mẹ
• Bên trong mẹ khối chỉ thị, tôi có một chỉ thị đứa trẻ đó sẽ nhận được một số đầu vào từ người dùng
• chỉ thị đứa trẻ sẽ đặt một giá trị trong phạm vi chỉ thị của cha mẹ
• tôi có thể lấy nó từ đó

Tất nhiên vấn đề là chỉ thị của cha mẹ và con là anh chị em ruột. Vì vậy, tôi không biết làm thế nào để làm điều này. Lưu ý - Tôi không muốn thiết lập dữ liệu trong

Fiddle: http://jsfiddle.net/rrosen326/CZWS4/

html:

<div ng-controller="parentController"> 
    <parent-dir dir-data="display this data"> 
     <child-dir></child-dir> 
    </parent-dir> 
</div> 

Javascript

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

testapp.controller('parentController', ['$scope', '$window', function ($scope, $window) { 
    console.log('parentController scope id = ', $scope.$id); 
    $scope.ctrl_data = "irrelevant ctrl data"; 
}]); 

testapp.directive('parentDir', function factory() { 
    return { 
     restrict: 'ECA', 
     scope: { 
      ctrl_data: '@' 
     }, 
     template: '<div><b>parentDir scope.dirData:</b> {{dirData}} <div class="offset1" ng-transclude></div> </div>', 
     replace: false, 
     transclude: true, 
     link: function (scope, element, attrs) { 
      scope.dirData = attrs.dirData; 
      console.log("parent_dir scope: ", scope.$id); 
     } 
    }; 
}); 

testapp.directive('childDir', function factory() { 
    return { 
     restrict: 'ECA', 
     template: '<h4>Begin child directive</h4><input type="text" ng-model="dirData" /></br><div><b>childDir scope.dirData:</b> {{dirData}}</div>', 
     replace: false, 
     transclude: false, 
     link: function (scope, element, attrs) { 
      console.log("child_dir scope: ", scope.$id); 
      scope.dirData = "No, THIS data!"; // default text 
     } 
    }; 
}); 

Answer 1

Nếu bạn muốn điều đó loại giao tiếp, bạn cần phải sử dụng require trong chỉ thị con. Điều đó sẽ yêu cầu phụ huynh controller vì vậy bạn cần có controller ở đó với chức năng mà bạn muốn các chỉ thị trẻ em sử dụng.

Ví dụ:

app.directive('parent', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    template: '<div>{{message}}<span ng-transclude></span></div>', 
    controller: function($scope) { 
     $scope.message = "Original parent message" 

     this.setMessage = function(message) { 
     $scope.message = message; 
     } 
    } 
    } 
}); 

Bộ điều khiển có tin nhắn trong $scope và bạn có một phương pháp để thay đổi nó.

Tại sao một trong số $scope và một sử dụng this? Bạn không thể truy cập vào $scope trong chỉ thị của trẻ, vì vậy bạn cần sử dụng this trong chức năng để chỉ thị con của bạn có thể gọi nó.

app.directive('child', function($timeout) { 
    return { 
    restrict: 'E', 
    require: '^parent', 
    link: function(scope, elem, attrs, parentCtrl) { 
     $timeout(function() { 
     parentCtrl.setMessage('I am the child!') 
     }, 3000) 
    } 
    } 
}) 

Như bạn thấy, liên kết nhận được thông số thứ tư với parentCtrl (hoặc nếu có nhiều hơn một mảng). Ở đây chúng ta chỉ chờ 3 giây cho đến khi chúng ta gọi phương thức đó chúng ta đã định nghĩa trong bộ điều khiển cha để thay đổi thông báo của nó.

Xem trực tiếp tại đây: http://plnkr.co/edit/72PjQSOlckGyUQnH7zOA?p=preview

Answer 2

Thứ nhất, xem this video. Nó giải thích tất cả.

Về cơ bản, bạn cần phải require: '^parentDir' và sau đó nó sẽ được thông qua vào chức năng liên kết của bạn:

link: function (scope, element, attrs, ParentCtrl) { 
    ParentCtrl.$scope.something = ''; 
}