從template.html調用控制器中的函數

Question

我是AngularJS的新手，不知怎的，現在我經歷了許多網站，我可以創建一個顯示一些數據的指令。現在我需要通過點擊按鈕向控制器發送一些數據。 我需要知道這樣做的正確方法

我創造了這個插件

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>

指令和控制器

// 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)
    })

  }

}

})

我的模板

<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>

我需要將數據發送到控制器的$scope.saveData()函數，數據將通過文本框輸入。 我把它作為ng-model="movies.someText" ，我認為這是錯誤的方式。

所以請幫助我。

Answer 1

您需要將saveData作為參數傳遞，如下所示：

<body ng-controller="movieDesc">
<div ng-repeat="m in movies" movies="m" save-data="saveData()"></div>

你會像這樣回到你的指令中：

    return {
       templateUrl: "movieCard.html",
       restrict: "EA",
       scope: {
         movies: '=',
         saveData:'='
       },
       link: ...

然后在您的template.html中，您不需要使用“ {{}} ”：

<input class="btnSelect" type="button" value="Save Data" ng-click="saveData(movies)">

Answer 2

使用& scope綁定。

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

並在指令模板中

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

然后通過綁定控制器方法

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

請注意，傳遞給控制器函數的參數名稱與指令模板中的對象鍵匹配。

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

當你在那里時，使用ng-src而不是src來避免對不存在的圖像的404請求

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

Answer 3

HTML

 <body ng-controller="movieDesc">
    <div ng-repeat="m in movies" movies="m">
      <movies-dir 
         movies="m" save-data="saveData(movie)"></movies-dir>
    </div>
</body>

指令和控制器

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

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

     $scope.movies = [/* movie object array data */]

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

  });

 angular.module('app').directive('moviesDir', function() {
    return {
       templateUrl: "movieCard.html",
       restrict: "EA",
       scope: {
          movies: '=',
         saveData: '&'
       },
       link: function(scope, element, attrs) {

       }

    }

 })

模板

  <div>
     <input class="btnSelect" type="button" value="Save Data" ng-click="saveData({ 'movie': movies  })">
 </div>

從template.html調用控制器中的函數

問題描述

3 個解決方案

解決方案1
1 2016-06-06 06:05:46

解決方案2
1 已采納 2016-06-06 06:11:04

解決方案3
1 2016-06-06 06:25:27

從template.html調用控制器中的函數

問題描述

3 個解決方案

解決方案1 1 2016-06-06 06:05:46

解決方案2 1 已采納 2016-06-06 06:11:04

解決方案3 1 2016-06-06 06:25:27

解決方案1
1 2016-06-06 06:05:46

解決方案2
1 已采納 2016-06-06 06:11:04

解決方案3
1 2016-06-06 06:25:27