Ad

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="[email protected]*" 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" target="_blank" rel="nofollow noreferrer" 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.

Ad

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}}" />
Ad
source: stackoverflow.com
Ad