angularjs: Ustaw wartość rodzic zakres dyrektywy z dyrektywą dziecięcej

Question

nie jestem pewien, że to jest sposób, aby to zrobić, ale moim celem jest następująca:

• mam dyrektywę nadrzędnego
• Wewnątrz rodzica dyrektywa w bloku, mam dyrektywę dziecięcą że dostanie jakieś wejście od użytkownika
• dyrektywa dziecko będzie ustawić wartość w zakresie stosowania dyrektywy dominującej
• mogę go stamtąd

Oczywiście problemem jest to, że dyrektywa dla rodziców i dzieci to rodzeństwo. Więc nie wiem, jak to zrobić. Uwaga - nie chcę, aby ustawić dane w

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

Jeśli chcesz tego rodzaju komunikacji, trzeba użyć require w dyrektywie dziecięcej. Będzie to wymagało rodzica controller, więc potrzebujesz funkcji controller z funkcjami, których chcesz używać w dyrektywach dla dzieci.

Na przykład:

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; 
     } 
    } 
    } 
}); 

Sterownik posiada wiadomości w $scope i masz sposób, aby je zmienić.

Dlaczego jeden w $scope i jeden przy użyciu this? Nie możesz uzyskać dostępu do $scope w dyrektywie podrzędnej, więc musisz użyć funkcji this w funkcji, aby Twoja dyrektywa podrzędna mogła do niej zadzwonić.

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) 
    } 
    } 
}) 

Jak widzisz, link otrzymuje czwarty parametr z parentCtrl (lub jeśli istnieje więcej niż jedna tablica). Tutaj czekamy tylko 3 sekundy, aż wywołasz tę metodę, którą zdefiniowaliśmy w kontrolerze nadrzędnym, aby zmienić jej komunikat.

Zobacz żyć tutaj: http://plnkr.co/edit/72PjQSOlckGyUQnH7zOA?p=preview

Answer 2

pierwsze, oglądać this video. Wyjaśnia to wszystko.

Zasadniczo trzeba require: '^parentDir' a następnie zostanie on przekazany do swojej funkcji Link:

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