logo
down
shadow

Why is a parent controller's $scope not accessible from a (child) directive?


Why is a parent controller's $scope not accessible from a (child) directive?

By : user2953824
Date : November 21 2020, 07:31 AM
I wish this help you From reading Scopes (Part 2 of the AngularJS - from beginner to expert in 7 steps series): A $scope can contain both data and functions available in a view. If AngularJS cannot find a function on a local $scope, the containing (parent) $scope will be checked for the property or method there. , change your scope to
code :
    scope: {
        data: '=data'
        myEvent: '=myEvent'
    }
       angular.module('Myapp').directive("my-directive",
 <my-directive data="scope-data" my-event="scope-event-function()"></my-directive>


Share : facebook icon twitter icon
Child scope accessible in parent without 'ng-controller' directive set

Child scope accessible in parent without 'ng-controller' directive set


By : Varshini
Date : March 29 2020, 07:55 AM
wish helps you Angular looks upwards for a controllers/method. Meaning if it is not in the current scope, it will look into the parent scope.
But in your case, you have have attached the controller in your route file.
Pass value from child directive isolated scope to parent directive isolated scope and trigger watch of parent

Pass value from child directive isolated scope to parent directive isolated scope and trigger watch of parent


By : davidchiles
Date : March 29 2020, 07:55 AM
To fix the issue you can do This fiddle reproduces your problem.
The problem
code :
<modal-dialog show='modal.shown' width='500px' class="sf-dialog">
    <div sf-ng-branch-finder branch-finder-title="Find your branch" show='modal.shown' ></div>
</modal-dialog>
<div ng-controller="ModalController as modal">
    <modal-dialog show='modal.shown' width='500px' class="sf-dialog">
        <div sf-ng-branch-finder branch-finder-title="Find your branch" show='modal.shown' ></div>
    </modal-dialog>
.controller('ModalController', function () {
    this.shown = true;
});
Accessing parent Controllers scope within a directive that uses ControllerAs and scope:true

Accessing parent Controllers scope within a directive that uses ControllerAs and scope:true


By : Gadenar
Date : March 29 2020, 07:55 AM
wish helps you Simply use the controllerAs syntax when you instantiate your MyController like so.
code :
<!-- Notice the "as vmMy" syntax : Now everything can be accessed via "vmMy." -->

<div ng-controller="MyController as vmMy"> 
    <my-directive></my-directive> 
</div>
template: 'From MyController: {{vmMy.foo}}<br> From MyDirective: {{vm.foo2}}'  
AngularJS : Child directive scope to inherit from parent directive isolated scope?

AngularJS : Child directive scope to inherit from parent directive isolated scope?


By : user3983607
Date : March 29 2020, 07:55 AM
To fix this issue This is where you need to use the manual transclusion function. If the parent directive has an isolate scope, the child DOM elements (and their directives) would not inherit from it (only, if they were in its template).
When you transclude, you can specify the scope explicitly:
code :
.directive("a", function(){
  return {
    scope: {},
    transclude: true,
    link: function(scope, element, attrs, ctrls, transclude){
       var newScope = scope.$new();
       transclude(newScope, function(clone){
         element.append(clone);
       })
    }
  };
});
<a>
  <b item="$innerProp"></b>
</a>
Calling parent directive scope function from child directive which triggers parent watcher

Calling parent directive scope function from child directive which triggers parent watcher


By : kjensenxz
Date : March 29 2020, 07:55 AM
it should still fix some issue Okay, after wrestling with this for a bit, I managed to produce a working version of a slimmed-down example:
code :
angular.module('myApp', [])
  .directive('calculatorForm', function() {
    return {
      restrict: 'A',
      replace: true,
      transclude: true,
      template: '<div ng-transclude></div>',
      link: function(scope, element, attrs) {
        scope.model = {};
        scope.price = {};

        scope.updateSelectedSpecs = function(attribute_id, prod_attr_val_id) {
          scope.$apply(function() {
            console.log('update selected specs');
            var selected_specs = {};
            selected_specs[attribute_id] = prod_attr_val_id;
            scope.model.selected_specs = selected_specs;
          });
        }

        scope.$watch('model.selected_specs', function(selected_specs, previous_selected_specs) {
          console.log('new selected specs', selected_specs, previous_selected_specs);
          if (selected_specs != previous_selected_specs) {
            console.log("and they're different");
          }
        });
      }
    };
  })
  .directive('calculatorAttribute', function() {
    return {
      restrict: 'A',
      template: "<input type='radio' name='attr{{attribute_id}}' ng-value='prod_attr_val_id'/>",
      replace: true,
      link: function(scope, element, attrs) {
        scope.attribute_id = attrs.attributeId;
        scope.prod_attr_val_id = attrs.prodAttrValId;

        element.on('click', function() {
          scope.$parent.updateSelectedSpecs(scope.attribute_id, scope.prod_attr_val_id);
        });
      }
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<form calculator-form ng-app="myApp">
  <input calculator-attribute attribute-id=1 prod-attr-val-id=1>
</form>
Related Posts Related Posts :
  • what can or cannot be done with a controller created in a module Vs controller created globally?
  • Angularjs - add ng-* attributes using directives
  • Why are my Angular, absolute path, URL's not compiling properly with Closure Compiler?
  • AngularJS routing not working properly in PhoneGap
  • AngularJS: Create new scope variable name using a variable value
  • Directive scope update does not update controller scope (AngularJs)
  • Unit-test a angular controller function in a directive
  • jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive
  • AngularJS determine filter in controller
  • How to deploy an app using ionic framework to Amazon? (elastic beanstalk prefered)
  • Conditional injection of a service in AngularJS
  • Filtering on object properties not working
  • Open $modal from the service and pass variables to the controller
  • ngClick evaluated against scope instead of isolateScope
  • onEnter and onExit are not called when state is left/activated in angularjs ui router
  • Shared client & server modules with angularjs and pongular
  • Getting the angular app to run when using protractor
  • Angularjs: create a link for download different types of file
  • AngularJS: On Change of Parent DropDown Option Also Changes the Dependant Drop Down Options Associated with Other Parent
  • Angular HTML5 mode, Wordpress, Rewrites, Apache and You
  • Using angular js form validations in <form:input> tag
  • AngularJS call common functions in a directive template
  • AngularJS Promise resolved incorrectly
  • properly clearing whole AngularJS ui-grid chart
  • Can not figure out how to store $rootScope in angular.bootstrap
  • animate.css animation within angularjs 1.3 using ngAnimate gives different animations in Firefox
  • Auth0 IE Issue: Unable to get property 'frames' of undefined or null reference
  • Am I misusing directives with too much logic?
  • Use an Angular JS value as a parameter of TWIG "path" function in Symfony 2
  • multiple function on ng-click angularjs
  • Converting $.ajax call to $http call in angular 404 error
  • Angularjs templateUrl file location not found
  • How to execute the function after change page in angularjs?
  • Pass variable to AngularJS directive without isolated scope
  • OAuth, Custom Login, or Both
  • Angular Directive: Isolate Scope & Transclude is true, but HTML in the directive needs to continue to bind to parent
  • Compare objects in angularjs
  • Combine "Checkbox" & "Avatar" in an Ionic Framework List
  • Issue with the Angular UI router when inheriting from a parent state
  • Is there a way to initialize an Angular Service without DI into controller
  • How to get back button in Ion-tabs page
  • AngularJS bind class attribute to model
  • How can I get AngularJS ui-router to respond correctly to a browser page refresh?
  • Angular validation does not work
  • Breez Create Complex Entities
  • Drag and drop using protractor in dthmlx component
  • In Angular JS, what is the default 'cache' value that is used when sending request with $http service?
  • How to change placeholder for single textbox in angular?
  • $ is not defined - jquery angular mixing
  • CORS issue angularjs and spring security
  • Angularjs cannot select last item in dropdown the first time
  • Angularjs - $watch issue
  • On change radio button to no the span should hide in angular
  • Creating a wordcloud generator in Angularjs
  • Angular UI Bootstrap collapse - whats wrong?
  • AngularJS after redirect from app to app, the default page is not loading
  • Why does my scope update my factory and my factory update my scope when it should not?
  • AngularJS testing $httpBackend.whenGET().respond() not working with number as parameter
  • Setting up Login in Angular App
  • Retrieve value that is stored in db and display in select box using angularjs and laravel
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org