Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular attribute directive value

I want to get a value straight from an attribute directive:

 <form cronos-dataset="People as p">
     Form Content
 </form>

In my JS I tried:

app.directive('cronosDataset',[function() {
  return {
    restrict: 'A',
    controller: 'CronosGenericDatasetController',
    scope: {
        "cronos-dataset" : '@'
    }
  };
}])

.controller("CronosGenericDatasetController",['$scope', function($scope) {
    alert($scope["cronos-dataset"]);
}]);

I want to alert "People as p" string but I get undefined. Is that right path or should I go thorough a different approach?

like image 548
nanndoj Avatar asked Mar 04 '15 14:03

nanndoj


People also ask

What is attribute directive in Angular?

The attribute directive changes the appearance or behavior of a DOM element. These directives look like regular HTML attributes in templates. The ngModel directive which is used for two-way is an example of an attribute directive.

What is attr in Angular?

Attribute binding in Angular helps you set values for attributes directly. With attribute binding, you can improve accessibility, style your application dynamically, and manage multiple CSS classes or styles simultaneously.

What is the use of attribute directive?

Change the appearance or behavior of DOM elements and Angular components with attribute directives. See the live example / download example for a working example containing the code snippets in this guide.


2 Answers

You are supposed to have camelCase in the scope declaration

app.directive('cronosDataset',[function() {
  return {
    restrict: 'A',
    controller: 'CronosGenericDatasetController',
    scope: {
        cronosDataset : '@'
    }
  };
}])

Here is a demo to see different variations http://plnkr.co/edit/G6BiGgs4pzNqLW2sSMt7?p=preview

like image 81
HarryH Avatar answered Oct 03 '22 02:10

HarryH


Make a link function instead:

app.directive('cronosDataset',[function() {
  return {
    scope: {},
    restrict: 'A',
    link: function (scope, elem, attrs) {
        alert(attrs.cronosDataset);
    }
like image 39
m0meni Avatar answered Oct 03 '22 02:10

m0meni