我是 AngularJS 的新手，不知何故，在浏览许多网站时，我现在能够创建一个指令来显示一些数据。现在我需要通过单击按钮将一些数据发送到 Controller 。我需要知道这样做的正确方法
我创建了 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>
指令和 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)
})
}
}
})
我的模板
<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>
我需要将数据发送到 Controller 的 $scope.saveData() 函数，数据将通过文本框输入。我将其作为 ng-model="movies.someText" 给出，我认为这是错误的方式。
所以请帮助我。
最佳答案
使用& scope binding .
scope: {
movies: '=',
save: '&'
},
在指令模板中
<input type="button" ng-click="save({movie: movies})" ...>
然后通过
绑定(bind) Controller 方法<div ng-repeat="m in movies" movies="m" save="saveData(movie)"></div>
注意传递给 Controller 函数的参数名称与指令模板中的对象键匹配。
https://plnkr.co/edit/9bF5FDea6wLn7vcGvEzU?p=preview
当你在那里时，使用 ng-src 而不是 src 以避免对不存在的图像的 404 请求
<img ng-src="{{movies.pic}}" />
关于javascript - 从 template.html 调用 Controller 中的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37650457/