get value from custom directive in a controller function - AngularJS

Question

I have the following code, i want to receive the ng-module value from custom directive in the controller function:

The getName function is the function when i am trying to get the value..

'use strict';

angular
.module('app', [])
.controller("Controller", function ($scope) {
$scope.getName = function() {
return $scope.name;
};
})
.controller("EditController", function($scope) {
$scope.editingMode = true;
})
.directive("newName", function ($parse) {
return {
template: 'Write name: <input type="text" ng-model="name">'
};
});


<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>Angular</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>

    <div ng-controller="Controller">
      <h1>Hello, {{ getName() }}</h1>

      <div ng-controller="EditController">
        <new-name ng-show="editingMode"></new-name>
      </div>
    </div>

  </body>
</html>

Can somebody help me?

anoop · Accepted Answer · 2017-09-26 04:28:53Z

your getName() function is in parent controller and your child controller overwriting the name variable (JS prototypical inheritance).,

You should model bind(use dot(.) in your bindings) your parent scope properties to avoid getting overwritten. also you should define restrict type for directive and should pass the variable from parent HTML.

Here is working code below :

angular
  .module('app', [])
  .controller("Controller", function($scope) {
    $scope.name = {
      n: ''
    }
    $scope.getName = function() {
      return $scope.name.n;
    };
  })
  .controller("EditController", function($scope) {
    $scope.editingMode = true;
  })
  .directive("newName", function($parse) {
    return {
      restrict: 'E',
      scope: {
        name: '=',
      },
      template: 'Write name: <input type="text" ng-model="name">'
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">

<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
</head>

<body>

  <div ng-controller="Controller">
    <h1>Hello, {{ getName()}}</h1>
    <div ng-controller="EditController">
      <new-name ng-show="editingMode" name="name.n"></new-name>
    </div>
  </div>
</body>

</html>

FurtherI suggest there is no need of 2 controllers in your code, one is enough though, and will solve your problem too.

yesIcan · Accepted Answer · 2017-09-26 05:23:47Z

Try this

<div ng-controller="Controller">
        <h1>Hello, {{ name }} </h1>

        <div ng-controller="EditController">
            <new-name ng-show="editingMode" name="name"></new-name>
        </div>
    </div>
angular
    .module('app', [])
    .controller("Controller", ['$scope' , function ($scope ) {
        $scope.getName = function (name) {
            return $scope.name = name;
        };

    }])
    .controller("EditController", function ($scope) {
        $scope.editingMode = true;
        $scope.$watch('name', function (newVal, oldVal) {
            $scope.getName(newVal);
        });
    })
    .directive("newName", function () {

        return {
            transclude :true,
            restrict: 'E',
            scope: {
                name: '=',
            },
            template: 'Write name: <input type="text" ng-model="name" >'
        };
    });

Collectives™ on Stack Overflow

get value from custom directive in a controller function - AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related