Javascript 从template.html调用控制器中的函数_Javascript_Angularjs_Angularjs Directive_Angularjs Controller

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

javascript angularjs

Javascript 从template.html调用控制器中的函数,javascript,angularjs,angularjs-directive,angularjs-controller,Javascript,Angularjs,Angularjs Directive,Angularjs Controller,我是AngularJS的新手，在浏览许多网站时，现在我能够创建一个显示一些数据的指令。现在我需要通过单击按钮将一些数据发送给控制器。我需要知道这样做的正确方法我创造了 html <!DOCTYPE html> <html ng-app="app"> <head> <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax

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

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

我的模板

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

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


名称：{{movies.Name}
描述：{{movies.desc}

我需要将数据发送到控制器的

$scope.saveData（）

函数，数据将通过文本框输入。我把它命名为

ng model=“movies.someText”

，我想这是错误的

因此，请帮助我。

您需要将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)">

使用

在指令模板中

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

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>

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

模板

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

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

我应该如何在按钮上调用它单击？？如下所示：您的示例在您编辑它之前就已经使用了

绑定，而不是原始的

绑定。现在没有了。您在

save sata

上传时也有一个输入错误，但您的示例仍然不起作用，但感谢您的帮助从不知道ng src和src，感谢您的解释，现在我将终生记住这一点。

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