angularjs-directive

How can I access controller scope from multi-level directives in below structure: I create a directive that has multi-level scopes inside its. 1. Controller scope 1.2. Directive1 scope(main directive) 1.2.1. Directive2 scope 1.2.1.1 Directive3 scope I want to get the controller scope from directive 3. please don't refer to $parent because the parent level it's not certain and a user may use this directive inside another directive.(see below codes) <div ng-controller="Test"> <custom-dir> <dir1> <dir2> <dir3> </dir3> </dir2> </dir1> <custom-dir> </div> The users create a function in the Test

Here is the plunkr: http://plnkr.co/edit/CzcVzKSvpKJTuTKARVJz?p=preview and this is my simple code: .directive('ngB', [function () { return { 'restrict': 'A', 'scope': { 'ngB': '=' }, 'link': function($scope, el) { var clss = 'b' , go = function () { if ($scope.ngB) { el.removeClass('a'); el.addClass(clss); } else { el.removeClass(clss); } }; $scope.$watch('ngB', function () { go(); }); } }; }]) .directive('ngF', [function () { return { 'restrict': 'A', 'scope': { 'ngF': '=' }, 'link': function($scope, el) { var clss = 'f' , go = function () { if ($scope.ngF) { el.removeClass('a'); el.addClass

I have a directive. It requires ngModel , and in the link, I should be able to use modelCtrl parameter to use $setViewValue(); and $render(); in conjunction to return to change the value in my input field and update the value stored in ngModel . Unfortunately, when I pass modelCtrl into my logic function, I cannot use $setViewValue(); and $render(); , even though I pass modelCtrl to the function. (See fiddle: http://jsfiddle.net/GSTC5/1/ ) myApp.directive('demo', function() { return { require: 'ngModel', restrict: 'EACM', link: function(scope, element, attrs, modelCtrl) { setAndRender

I have a notification service which works well for when page is loaded and Controller is loaded But when I have different buttons calling different functions, they change message, but alerts don't show up Here is a plunker for that - http://plnkr.co/edit/YioiJXNkaET6T2mexjCq?p=preview What is that I need to do to update it whenever $scope.message changes? You could $watch the model and show the alert when it changes. http://plnkr.co/edit/fJuP9LWH4MNVV1cQs3ED?p=preview In linker function of your directive: link: function(scope, element, attrs) { scope.$watch('ngModel', function() { element.show

I am trying to load conditional template urls via attributes, my directives is as follows. The directive is in a ng-repeate and when box.key == 'experiences' the expression is returning education-form.php and not experiences-form.php. <div multiple-form directive-data='directiveData' template-url="box.key == 'experiences'? 'experiences-form.php':'education-form.php'" item="item" forms="forms" form-name="{{box.key}}{{item._id}}" onsave="updateMultipleUser(box.key, item._id, $data)" onreset="formAction($formName, 'reset')" cancel="formAction($formName, 'cancel')" > </div> Directive DDO {

I'm having trouble understanding how nested directives work with AngularJS. var app = angular.module('plunker', []); app.directive('myTable', function() { return { restrict: 'E', template: [ '<table class="table table-query" ng-show="queries.length">', '<thead>', '<tr>', '<th class="query-name">Name</th>', '<th class="query-status">Status</th>', '</tr>', '</thead>', '<tbody>', '<my-row ng-repeat="query in queries track by $index"', 'query="query">', '</my-row>', '</tbody>', '</table>', ].join(''), scope: { queries: '=' }, controller: function() { }, link: function(scope, element) { } }; });