CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Ariel
Ariel

Reputation: 1527

Angular Directive, argument not beign read and console.log not working

i'm trying to make this directive work, the goal is to read a JSON object that comes with the menues text to display, according to it the tabs will fill with other directives.

HTML

<lista-tabs myMenues="general.sectionsList"></lista-tabs>

JS

app.directive('listaTabs', function() {
    return {
        restrict: 'E',
        scope: {
            myMenues: '@',
        },
        link: function(scope, element, attrs) {
            console.log("Inside link function");
            console.log(myMenues);
        },
    };
});

The other directives work just fine. I need to analyze that JSON object and according to it, assemble the menu, that won't be a problem once I get this working. But console.log is not showing anything, not even that plain text. The alert method works fine.

I have the console.log plugin for phonegap installed and works in other parts of the project.

BTW: I'm working in phonegap with tw bootstrap.

Thanks in advance!

Upvotes: 0

Views: 4932

Answers (2)

ryanyuyu
ryanyuyu

Reputation: 6486

The attributes of your directive (in the HTML) follow the same angular normalization. This means that they must be dash-delimitted just like the directive name. 

<lista-tabs my-menues="general.sectionsList"></lista-tabs>

On another note, in your link function, you refer to a variable myMenues, which is not defined anywhere. Remember that myMenues is a property of yourscopeobject you defined above. You should be usingscope.myMenues`.

Finally, you are currently using the @ binding, which is meant to bind to DOM strings. If you actually want objects, you need to use either two-way = binding or a one-way expression binding (&). See the documentation for directive definitions.

Upvotes: 1

Bazinga
Bazinga

Reputation: 11214

All angular directives need to be dash delimitted and i understand from your code that you want to bind this to an object to not a string, also you forgat to use scope on myMenues attr, here working example:

var app = angular.module('stack', []);

app.controller('MainCtrl', function($scope) {
  $scope.general = {
    sectionsList: 'someText'
  }
});

app.directive('listaTabs', function() {
  return {
    restrict: 'E',
    scope: {
      myMenues: '=',
    },
    link: function(scope, element, attrs) {
      console.log("Inside link function");
      alert(scope.myMenues);
    },
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<body ng-app="stack" ng-controller="MainCtrl">
  <lista-tabs my-menues="general.sectionsList"></lista-tabs>
</body>

Upvotes: 2

Related Questions