вызов функции в контроллере из template.html

Я новичок в AngularJS. Как-то во время просмотра многих сайтов я могу создать директиву для отображения некоторых данных. Теперь мне нужно отправить некоторые данные контроллеру, нажав кнопку. Мне нужно знать правильный способ делать этовызов функции в контроллере из template.html

Я создал 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" 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", который, я полагаю, является неправильным.

Так что, пожалуйста, помогите мне.

источник

2016-06-06 Abhishek Asthana

Используйте &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}}" />

источник

2016-06-06 06:11:04 Phil

Почему downvote? – Phil

Спасибо! работает как шарм –

никогда не знал о ng-src и src, спасибо за объяснение, теперь я запомню это на всю жизнь. –

Вам необходимо пройти сейв в качестве параметра, например так:

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

источник

2016-06-06 06:05:46 Sparw

как я должен назвать его по нажатию кнопки ?? –

вот так: – Sparw

Ваш пример работал до того, как вы отредактировали его, чтобы использовать привязку '&' вместо ваш оригинальный '=' привязку. Теперь это не так. У вас также есть опечатка на 'save-sata' – Phil

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>

источник

2016-06-06 06:25:27 sabbir

Зачем вводить новую директиву, когда OP уже имеет «фильмы» – Phil

вызов функции в контроллере из template.html

ответ

Смежные вопросы