Abhishek Asthana Abhishek Asthana - 5 months ago 24
AngularJS Question

call function in controller from template.html

I am new to AngularJS, Somehow while going through many sites now I am able to create a directive for showing some data.Now I need to send some data to controller by clicking the button. I need to know the proper way of doing this

I have created the plunk

html

<!DOCTYPE html>
<html ng-app="app">

<head>
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body ng-controller="movieDesc">
<div ng-repeat="m in movies" movies="m"></div>
</body>

</html>


Directive and Controller

// Code goes here

angular.module('app', []);

angular.module('app').controller('movieDesc', function($scope) {

$scope.movies = [{
name: 'abc',
desc: 'this is desc text for the movie',
pic: 'http://png.clipart.me/graphics/thumbs/134/abstract-geometric-background-triangle-and-square-black_134053397.jpg'
}, {
name: 'def',
desc: 'this is desc text for the movie def',
pic: 'http://png.clipart.me/graphics/thumbs/201/abstract-modern-banner-background-of-geometric-shapes-abstract-geometric-form_201768245.jpg'
}, {
name: 'ghi',
desc: 'this is desc text for the movie ghi',
pic: 'http://www.cianellistudios.com/images/abstract-art/abstract-art-infinite-150.jpg'
}]

$scope.saveData = function(data) {
console.log(data);
}

});

angular.module('app').directive('movies', function() {
return {
templateUrl: "movieCard.html",
restrict: "EA",
scope: {
movies: '='
},
link: function(scope, element, attrs) {
element.addClass('moviesBox');
var clickedFn = function() {
alert("clicked");
};
console.log("console", element[0].querySelector('.btnSelect'));
var $this = element[0].querySelector('.btnSelect');
$($this).click(function() {
alert(scope.movies.desc)
})

}

}

})


My Template

<div>
<div>
<b>Name:</b> {{movies.name}}
</div>
<div>
<b>Description:</b> {{movies.desc}}
</div>
<div>
<img src="{{movies.pic}}" />
</div>
<div>
<input type="text" ng-model="movies.someText">
</div>
<div>
<input class="btnSelect" type="button" value="Desc" ng-click="clickedFn()">
</div>
<div>
<input class="btnSelect" type="button" value="Save Data" ng-click="saveData({{movies}})">
</div>
</div>


I need to send the data to the controller's
$scope.saveData()
function, the data will be entered through the textbox. I have given it as
ng-model="movies.someText"
which I suppose is the wrong way.

So please help me.

Answer

Use the & scope binding.

scope: {
    movies: '=',
    save: '&'
},

and in the directive template

<input type="button" ng-click="save({movie: movies})" ...>

You then bind the controller method via

<div ng-repeat="m in movies" movies="m" save="saveData(movie)"></div>

Note the argument name passed to the controller function matches the object key in the directive template.

https://plnkr.co/edit/9bF5FDea6wLn7vcGvEzU?p=preview


While you're there, use ng-src instead of src to avoid a 404 request for a non-existent image

<img ng-src="{{movies.pic}}" />
Comments