logo
down
shadow

Passing variables to directives in AngularJS without a controller


Passing variables to directives in AngularJS without a controller

By : Gabriel C
Date : November 22 2020, 09:00 AM
will help you If you have a top-level controller, you can define the sitemap as a property in the top-level scope and child scopes should be able to access that property thanks to prototypal inheritance.
Another pattern you can apply is to define a provider for your directive that can be used at the configuration phase to define a sitemap. Then you don't have to use an attribute to pass the sitemap to your directive. Something like:
code :
angular
    .module('awesomeSitemap', [])
    .provider('sitemapData', function () {
        var sitemapData;

        this.setSitemapData = function (_sitemapData) {
            sitemapData = _sitemapData;
        };

        this.$get = function () {
            return sitemapData;
        };
    })
    .directive('sitemap', [ 'sitemapData', function (sitemapData) {
        return {
            restrict: 'AE',
            template: sitemapTmpl,
            link: function (scope) {
                scope.sitemapData = sitemapData;
            }
        };
    }]);
angular
    .module('app', [ 'awesomeSitemap' ])
    .config([ 'sitemapDataProvider', function (sitemapDataProvider) {
        sitemapDataProvider.setSitemapData(theSitemapData);
    }]);


Share : facebook icon twitter icon
angularjs passing variables into controller

angularjs passing variables into controller


By : Leo
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further You can use a service or a factory for this, combined with promises:
You can setup a factory that returns a promise, and create a global function (accessible from 3rd-party JS) to resolve the promise.
code :
app.factory('fromoutside', function($window, $q, $rootScope) {
    var deferred = $q.defer();

    $window.injectIntoAngularWorld = function(obj) {
        deferred.resolve(obj);
        $rootScope.$apply();
    };

    return deferred.promise;
});
app.controller('main', function($scope, fromoutside) {
    fromoutside.then(function(obj) {
        $scope.data = obj;
    });
});
setTimeout(function() {
    window.injectIntoAngularWorld({
        A: 1,
        B: 2,
        C: 3
    });
}, 2000);
app.factory('data', function($window) {
  var items = [];
  var scopes = [];

  $window.addItem = function(item) {
    items.push(item);
    angular.forEach(scopes, function(scope) {
        scope.$digest();
    });
  };

  return {
    items: items,
    register: function(scope) { scopes.push(scope); }
};
Angularjs passing variables from controller to dao service

Angularjs passing variables from controller to dao service


By : Ismael Chery
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further HTTP-CRUD(Create-$http.post,Read-$http.get,Update-$http.put,Dlete-$http.delet)
code :
$http.get-It used to get the value means this body contain empty value

$http.post-It used to create value means this body contain data (your are post some data to server)

$http.update-It used to update exit value this body also contain data

$http.delete-It used to delete exit value this body contain empty(send through param(?id=1111))
AngularJS : How do you access a directives scope from the same directives controller?

AngularJS : How do you access a directives scope from the same directives controller?


By : user2934199
Date : March 29 2020, 07:55 AM
To fix this issue I believe you are setting skim object asynchronously from the parent controller, possibly from another ajax call. But your directive would have instantiated already (controller runs/instantiated first and then the link function). So when you try to access $scope.skim it doesn't exist yet. Binding in the template works because they are updated by angular during a digest cycle the happened after the assignment of value to skim from the parent controller. So one way you could do is to create a temporary watcher till you get the skim two way bound value populated.
code :
.directive('authorname', function() {
    return {
      restrict: 'E',
      scope: { 
        skim: '=skim' 
      },
      controller: function($scope, User) {

       /*Create a temporary watch till you get skim or 
         watch skim.author according to how you are assigning*/

        var unWatch = $scope.$watch('skim', function(val){ 

           if(angular.isDefined(val)) { //Once you get skim
              unWatch(); //De-register the watcher
              init(); //Initialize
           }

        });

        function init(){
           User.get({ _id: skim.author }, function(user) {
             $scope.author = user.name;
           });
        }

      },
      template: '<small>Skim by {{author}}</small>' // but can access {{skim.author}} here
    };
  });
AngularJS custom directives - controller variables 'crosstalk'

AngularJS custom directives - controller variables 'crosstalk'


By : Pradeep
Date : March 29 2020, 07:55 AM
wish helps you Write scope: {} in your directive that isolates the directive’s scope from any parent scope(s)
From AngularJS documentation
in angularjs directives returned object is executed every time directives are called but locally defined variables not?

in angularjs directives returned object is executed every time directives are called but locally defined variables not?


By : Renato Nunes da Cost
Date : March 29 2020, 07:55 AM
should help you out
Now, if anyone could explain why "In directive " is logged only once. Controller is behaving as expected.
code :
<custom-heading></custom-heading>
<custom-heading></custom-heading>
<custom-heading></custom-heading> 
Related Posts Related Posts :
  • I want to restrict HTML input autocomplete to 3 letter minimum
  • tinyMCE editor not updating on the fly
  • typescript kendo-ui call method from string
  • HttpCompileException was unhandled by user code (when i am adding c# code in script)
  • Send form data as array of objects to controller in asp.net mvc
  • Javascript, multi file modules and Require.Js
  • how to render a complete new template and leave the application template in ember
  • Hover unrelated divs
  • Permute string until it matches some input?
  • How to fire JQuery change event when input value changed programmatically?
  • AJAX: POST data to a different url
  • checkbox column in jquery datatable
  • Document.evaluate for documents without namespaceURI crashes Microsoft Edge
  • Bootstrap Menu with "More" option Responsive issue
  • Standard inputs not being added to Angularjs Form $Scope
  • Express promise throw error
  • onclick and get in jquery
  • How to get the country code from Google Places API
  • Passing parameters url in Select2
  • Is there any frame work for Marklogic to write javascript code?
  • How to implement a boostrap template over bootstrap-sass gem
  • Why fixed div comes out when horizontally scrolled?
  • How to limit scope of a function in javascript/ jquery
  • Overlapping legend d3.js
  • Apply transition to div
  • Javascript game help - counting with dice
  • How to hide a div from angular controller
  • Can Promise load multi urls in order?
  • How enable Hover event for bootstrap menus?
  • D3 scale.invert() isn't returning date for x
  • Parsing object to array using underscore js or lodash
  • ES6 with React and Browserify
  • AngularJS Factory return type undefined
  • javascript follow html input fields
  • how to declare a double array in javascript for this particular UI
  • Jquery : find length of mixed list
  • Returning the array before the function is complete & Angular JS
  • Javascript set value of class & hidden input in nested divs
  • Register custom filters with vue.js
  • Add class to input parent
  • Angular controller not talking to view
  • Trouble creating "if then" Javascript statement to change background color of page
  • Socket.IO - Middleware and scoping: how should I access global IO object from external middleware?
  • add class when input is valid in angularjs
  • Positioning multiple div elements
  • Checkbox clicking works, deselecting checkbox not working Javascript
  • Adding ajax jQuery File upload
  • Creating a dynamic array within a dynamic array in JQuery
  • Multiple File Upload actions for a single File Input PHP/JS
  • Want to move an added element to a different part of the DOM
  • Why can't I get Angularjs to work?
  • Minimizing browser window in Firefox & Chrome adds white space to right of page
  • I need to insert the date and time of employee stamp in and out into mysql database
  • Making css auto slider
  • why can't I defne the function first?
  • Pagination with MongoDB in Node.js (With Sorting)
  • How to repeat each() without page refresh
  • Position div at position of another div
  • Click handler is called multiple times in jQuery animate
  • How to multiply each element in an array with a different number (javascript)
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co