ng-model value are not shown in angular directive

Question

I have an angular directive for data insert. And now I want to use same angular directive for data edit/update, but my problem is, the input value is not shown in the input text field. My code is given below:

directive (js) :

  dirApp.directive("inputDesign", function () {
    return {
       restrict: 'E',
       transclude: true,
       replace: true,
       scope: {
          inputName: '@',
          inputNameText: "@",
          inputValue: '@',
          inputObject: '=',
          checkInput: '&'
       },
       templateUrl: '../../template/_inputDesign.php'       
    };
});

template _inputDesign.php:

<div class="form-group">
    <!-- {{inputObject[name]}} and {{inputValue}} value is not shown -->
    <input type="text" value="{{inputObject[name]}}"  class="form-control" ng-model="inputObject[name]" name="{{inputName}}" placeholder="Enter {{inputNameText}}">

 </div>

html code ::

  <input-design
        input-name="a_gradeName"
        input-name-text="Grade Name"
        input-value="some value" // not work
        input-object="gradeTbl.gradeName"
        check-input="checkInput(gradeTbl.gradeName, gradeTbl.gradeName[name])">
  </input-design>

js code ::

/* grade model */
$scope.gradeTbl = {
  'gradeName': {
      'name': 'a_gradeName',
      'a_gradeName': 'some value',
      'display': 'Grade Name',
      'status': 'initial',
      'regExpr': 'Alphanumeric'
    }
 };

 $scope.gradeTbl.gradeName.a_gradeName = "this is test";   // not worked
 $scope.gradeTbl.gradeName.name= "this is test x";

Any chance of a Fiddle or Plunker? – camden_kid Feb 03 '15 at 19:11 — camden_kid, Feb 03 '15 at 19:11

score 0 · Answer 1 · edited May 23 '17 at 12:12

My best guess is that is has to do with this bit:

scope: { inputName: '@', inputNameText: "@", inputValue: '@', inputObject: '=', checkInput: '&' },

I would try changing inputValue to

inputValue: '=',

Here is another answer about the difference between = and @ in scope.

What is the difference between '@' and '=' in directive scope in AngularJS?

score 0 · Accepted Answer · answered Feb 03 '15 at 19:31

0

In your _inputDesign.php, change value and ng-model from {{inputObject[name]}} to inputObject.name.

answered Feb 03 '15 at 19:31

brennan

131
5

ng-model value are not shown in angular directive

2 Answers2