Aufruf Funktion in Controller aus template.html

Ich bin neu in AngularJS, Irgendwie während ich durch viele Websites jetzt bin ich in der Lage, eine Direktive für die Anzeige einiger Daten zu erstellen.Jetzt muss ich einige Daten an den Controller senden, indem Sie auf die Schaltfläche klicken. Ich brauche die richtige Art und Weise, dies zu tunAufruf Funktion in Controller aus template.html

ich die HTML-plunk

erstellt haben, zu wissen,

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

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

Ich brauche $scope.saveData() Funktion, die Daten zu der Steuerung zu senden, werden die Daten durch das Textfeld eingegeben werden. Ich habe es als ng-model="movies.someText" gegeben, was ich denke, ist der falsche Weg.

Also bitte hilf mir.

Quelle

2016-06-06 Abhishek Asthana

Verwenden Sie die &scope binding.

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

und in der Richtlinie Vorlage

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

Sie die Controller-Methode dann binden über

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

Hinweis des Argument Name an die Controller-Funktion übergeben entspricht den Objektschlüssel in der Richtlinie Vorlage .

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

Während Sie dort sind, verwenden ng-src statt src

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

Quelle

2016-06-06 06:11:04 Phil

Warum der Downvote? – Phil

Danke! funktioniert wie Charme –

wusste nie über ng-src und src, danke für die Erklärung, jetzt werde ich mich daran erinnern für das ganze Leben. –

Sie benötigen speichereDaten als Parameter wie folgt weitergeben müssen:

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

Und Sie zurück in Ihre Richtlinie wie folgt aus:

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

Und dann in Ihrem template.html , müssen Sie nicht "{{}}" verwenden:

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

Quelle

2016-06-06 06:05:46 Sparw

wie soll ich nenne es auf den Button klicken ?? –

wie folgt: – Sparw

Ihr Beispiel funktionierte, bevor Sie es editierten, um die '&' -Bindung zu verwenden Ihre ursprüngliche '=' Bindung. Jetzt ist es nicht. Sie haben auch einen Tippfehler bei '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>

404 Anforderung für ein nicht vorhandenes Bild zu vermeiden

Richtlinie und Controller-

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

     } 

    } 

})

Vorlage

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

Quelle

2016-06-06 06:25:27 sabbir

Warum eine neue Direktive einführen, wenn OP bereits 'Filme' hat – Phil

Aufruf Funktion in Controller aus template.html

Antwort

Verwandte Themen