Angular setting new variables in custom directives

Question

I am following a course on Angular and as a complete newbie I have a newbie question to ask about custom directives. I wonder how can we set new variables in that custom directive and access them in our view, is that even possible, if somebody could explain that in a clear way?

For example:

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {

$scope.person = {
    name: 'John Doe',
    address: '555 Main St., New York, NY 11111'
}

}]);

myApp.directive("searchResult", function() {
return {
   restrict: 'AECM',
   templateUrl: 'directives/searchresult.html',
   replace: true,
   scope: {
       personName: "@",
       personAddress: "@",
       newVariable: "someValue"
   }
 }
});

searchresult.html

<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">{{ personName }}</h4>
<p class="list-group-item-text">
    {{ personAddress }}
</p>
<p class="list-group-item-text">
    {{ newVariable }}
</p>

main.html

<label>Search</label>
<input type="text" value="Doe" />
 <h3>Search Results</h3>
<div class="list-group">
<search-result person-name="{{ person.name }}" person-address="{{ person.address }}" newVariable="{}"></search-result>

can you a bit explain what you expect?

Grundy
– Grundy

2016-04-08 09:06:31 +00:00
Commented Apr 8, 2016 at 9:06 — Grundy
– Grundy, Commented Apr 8, 2016 at 9:06

Ebin Manuval · Accepted Answer · 2016-04-08 09:02:17Z

1

use link function for local scope

myApp.directive("searchResult", function() {
return {
   restrict: 'AECM',
   templateUrl: 'directives/searchresult.html',
   replace: true,
   scope: {
       personName: "@",
       personAddress: "@"
   },
   link: function(scope, elem, attr) { scope.newVariable='something'; },
 };
});

answered Apr 8, 2016 at 9:02

Ebin Manuval

1,25514 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

U13-Forward · Accepted Answer · 2021-11-01 08:04:17Z

0

Use This.

       var app = angular.module("test",[]);
       app.controller("Ctrl1",function($scope){    $scope.name = "Abc";    $scope.reverseName = function(){
       $scope.name = $scope.name.split('').reverse().join('');    }; });

 app.directive("myDirective", function(){    return {
       restrict: "EA",
       scope: false,
       template: "<div>Your name is : {{name}}</div>"+
       "Change your name : <input type='`enter code here`text' ng-model='name' />"    }; });

edited Nov 1, 2021 at 8:04

U13-Forward

71.8k15 gold badges100 silver badges125 bronze badges

answered Apr 8, 2016 at 9:08

Arjun Yadav

1266 bronze badges

Collectives™ on Stack Overflow

Angular setting new variables in custom directives

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