0

I have my input directive which takes the input value from html, and updates the angular model:

.directive('input', function($parse) {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function(scope, element, attrs) {
      if (attrs.ngModel && attrs.value) {
        $parse(attrs.ngModel).assign(scope, attrs.value);
      }
    }
  };
});

Then I have my html which has the html value and angular model binded:

  <div ng-controller="form" class="form">
    <h2>Form with controller</h2>
    <input type="text" ng-model="item.example" value="defaultValue">
    <button ng-click="checkValue()">Check value</button>
  </div>

When I run the test as a controller it works perfectly:

.controller('form', function($scope) {
  $scope.item = {};
  $scope.checkValue = function() {
    console.log('checkValue', $scope.item);
  };
})

But as a nested directive it does not get the value:

.directive('form', function() {
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      scope.item = {};
      scope.checkValue = function() {
        console.log('checkValue', scope.item);
      };
    }
  };
})

My guess is that the directive scopes are separate, so one directive does not affect the other, however it works fine with the controller + directive?

I've tried changing the directive scopes using the suggestions here: Why are my AngularJS directives sharing scope?

.directive('input', function($parse) {
  return {
    restrict: 'E',
    require: '?ngModel',
    scope: true,
    link: function(scope, element, attrs) {
      if (attrs.ngModel && attrs.value) {
        $parse(attrs.ngModel).assign(scope, attrs.value);
      }
    }
  };
});

But can't get the two directives to share the same scope. Is this possible?

Here is my demo showing the two approaches: https://jsfiddle.net/kmturley/L1bky0g0/1/

Community
  • 1
  • 1
Kim T
  • 5,770
  • 1
  • 52
  • 79
  • What exactly are you trying to achieve ? There's probably a way to make this work but I'm sure making layers communicate with each other like that can be avoided... – LoremIpsum Feb 01 '16 at 20:04
  • All I need if for the default input value to be passed to the model. But Angular doesn't pass this automatically, so I either need to manually find the value and model, or add a directive to have this functionality. Problems is it's already within another directive! This is the original issue: http://stackoverflow.com/questions/10610282/angularjs-value-attribute-on-an-input-text-box-is-ignored-when-there-is-a-ng-m – Kim T Feb 01 '16 at 20:47
  • Why don't you initialize your model from your controller ??? – LoremIpsum Feb 01 '16 at 21:55
  • ya that's one option (showed in my fiddle), just wondering if it's possible to share the scope between directives – Kim T Feb 01 '16 at 22:14
  • It is, but it's not advised to rely on sibling elements. It's way better to use a service if you wanna share stuff between directives. Here, however, you just want to initialize a value and that shouldn't be the responsibility of a directive. – LoremIpsum Feb 01 '16 at 23:27
  • The default value is part of the static html template, the users preference and model is saved to the server. so this is correct separation of funtionality. Also beings a string I'd like to have it in the template incase I need to translate it – Kim T Feb 02 '16 at 17:21
  • @LoremIpsum i'm almost there, but there is one last bug which is preventing the final value for showing. I'm guessing it's because directives are loaded together, so values are overwriting each other https://jsfiddle.net/kmturley/L1bky0g0/2/ – Kim T Feb 09 '16 at 20:50

0 Answers0