CODEWITHSUNDEEP
javascriptangularjshtmlangularjs-directiveangular-directive
StepUp
StepUp

Reputation: 38164

Data is not shown in created directive

My html looks like this:

<body ng-app="customDirective">
<div ng-controller="anController">
Date format: <input ng-model="fooData"> <hr/>
Current time is: <my-new-directive foo-Attr="{{fooData}}"></my-new-directive>
</div>
</body>
</html>

I would like to update data inside of my created tag my-new-directive if a scope property scope.fooData is changed.

So I have a scope property called fooData:

$scope.fooData = 'Hello World!:)';

and I am creating a directive:

(function(angular) {
  'use strict';
angular.module('customDirective', [])
  .controller('anController', ['$scope', function($scope) {
    $scope.fooData = 'Hello World!:)';
  }])
  .directive('myNewDirective', [function() {

    function link(scope, element, attrs) {
      var format,
          timeoutId;

      function updateValue() {
        element.text(format);
      }

      scope.$watch(scope.fooData, function(value) {
        format = value;
        updateValue();
      });
    }

    return {
      restrict: 'A',
      link: link,
      scope: {
         fooAttr: '@' 
      }
    };
  }]);
  document.createElement('my-new-directive');
})(window.angular);

But if I write new values inside of input tag, then nothing occurs in my new directive.

Any help would be greatly appreciated! I am using AngularJS 1.5.8.

Upvotes: 1

Views: 65

Answers (4)

Roy Milder
Roy Milder

Reputation: 906

I see several mistakes and the directive is overly complex. On top of all comments above, this is wrong:

   return {
      restrict: 'A',
      link: link,
      scope: {
         fooAttr: '@' 
      }
    };

You restrict the directive to act when added as an attribute. However in your example code:

Current time is: <my-new-directive foo-Attr="{{fooData}}"></my-new-directive>

You're using it as an element.

Change your directive like this:

   return {
      restrict: 'AE', // allow it as element or attribute
      link: link,
      scope: {
         fooAttr: '@' 
      }
    };

or

   return {
      restrict: 'E',  // only element
      link: link,
      scope: {
         fooAttr: '@' 
      }
    };

also, remove this:

  document.createElement('my-new-directive');

Check out this codepen: http://codepen.io/anon/pen/QdjBZr That should help you out.

Upvotes: 1

Avnesh Shakya
Avnesh Shakya

Reputation: 3906

Change 

<div ng-anController="anController">

to 

<div ng-controller="anController">

And try to follow better naming convension, like app name should not have directive suffix, and directive name also should be in camelcase as @pankajParkar mentioned.

Upvotes: 0

Nicolas Z
Nicolas Z

Reputation: 55

  1. ng-anController="anController", it seems it should be ng-controller="anController".

  2. You should watch scope.fooAttr instead of scope.fooData.

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

Several mistakes

  1. Directive name should be cammelCase.
  2. Attribute should foo-attr instead of fooAttr

  3. As you had @(one way binding) you should use foo-attr="{{fooData}}"

Upvotes: 0

Related Questions