Question

192

AngularJS Directives not working

rated 0 times [ 197] [ 5] / answers: 1 / hits: 36189 / 12 Years ago, mon, january 14, 2013, 12:00:00

I'm using AngularJS in a project of mine, and I wanted to try creating directives. I already followed several tutorials and I can't see where I'm doing it wrong. Even worst, it doesn't shows up any error or warning message, but it also does not executes the directive's function. Right now, my code is pretty much this:

angular.module('components', []).directive('ngxOnshow', function() {

   return {

          restrict: 'A',

          link: function(scope, element, attrs){

                        console.log(hello world)

                        //Resto do código da função

          }  

   };

});

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

In the body of the HTML page I have this:

<body ng-autobind ng-app=app>

But then, when I use the directive, it does not work.

<div ng-show=showApp == true ngx-onshow=showAppBar()>

</div>

The rest of the application works just fine, the bindings, the default directives, everything except this. Perhaps I'm missing something?

Thanks,
Scorch :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lincolnx

Add To Favorites

Follow

Total Points: 602

Total Questions: 90

Total Answers: 94

Location: Saint Lucia

Member since Wed, Feb 8, 2023

1 Year ago

lincolnx questions

1 csv-parse is throwing Invalid Opening Quote: a quote is found inside a field at line

Thu, Jan 27, 22, 00:00, 2 Years ago

1 React: Calling Function From Another Component (Specific Example)

Tue, Jul 27, 21, 00:00, 3 Years ago

1 How to implement back button in Angular for navigating previous page?

Mon, Dec 21, 20, 00:00, 4 Years ago

1 How can I disable CORS for a single route in Express without rewriting all of my routes?

Sun, Jun 21, 20, 00:00, 4 Years ago

1 How to append inputs with formik in react

Mon, Jun 1, 20, 00:00, 4 Years ago

View All

answered 12 Years ago valentinam · Accepted Answer

Use '&' to allow a directive to execute an expression/function defined in the parent scope. $observe an interpolated isolate scope attribute (i.e., one defined with '@' that contains {{}}) to determine when it changes:

myApp.directive('ngxOnshow', function () {

  return {

    restrict: 'A',

    scope: {

      showApp: '@',

      ngxOnshow: '&'

    },

    link: function (scope, element, attrs) {

      console.log(inside link function)

      attrs.$observe('showApp', function (newValue) {

        newValue === true && scope.ngxOnshow()

      })

    }

  };

});

newValue is compared with true not true because interpolated values are always strings.

HTML:

<div ng-show=showApp == true show-app={{showApp}} ngx-Onshow=showAppBar()>

Fiddle.