Question

我是AngularJS的新手，不知怎的，现在我经历了许多网站，我可以创建一个显示一些数据的指令。现在我需要通过点击按钮向控制器发送一些数据。我需要知道这样做的正确方法

我创建了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>

指令和控制器

// 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中，您不需要使用＆＃39; {{}}＆＃39; ：

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

Answer 2

使用& scope binding。

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

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>

<强>模板

/\bpic.twitter.com\/\w{10}\b/

从template.html调用控制器中的函数

3 个答案: