Question

我现在正在学习棱角分明的js并且已经击中了另一个车辙。我想让我的按钮改变电影ID。我知道它正在识别点击，因为我更改了HTML文件中的一些单词来测试它。我认为这不是我的JS文件。

我在搜索http://jsfiddle.net/7Sg6a/期间发现了这一点。文档在括号内只有一个表达式，这个例子有参数。我试过了两个和其他一些但都没有用过。

这是我最近的失败尝试。如果我能在正确的方向上轻推，我将非常感激。

<!DOCTYPE HTML>
<html lang = "en" ng-app="movies"><!-- lets page use controllers/movies.js-->

<head>
  <title>Watch a movie!</title>

  <meta charset = "UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="description" content="">
  <meta name="keywords" content="">

  <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.mysite.com/rss/rss2.xml" />
  <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
  <!-- <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"> -->
  <!-- Preloading scripts? -->
  <script src="js/angular.min.js"></script>
  <script src="http://code.angularjs.org/1.2.0rc1/angular-route.min.js"></script>
  <!--<script src="js/angular-resource.min.js" type="text/javascript"></script>-->
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <!-- <script src="js/bootstrap.js"></script> -->
  <script src="controllers/movies.js"></script>

</head>
<body>
  <div id="wrapper">
    <header>
      <div id="logo">
    <img src="images/logo.png" alt="Cinema Plus - Movies plus a whole lot more." class="img-responsive">
      </div>
    </header>

    <nav>
      <div class='row-fluid'>
    <div class="span2"></div>
    <button ng-click="nowShowing()" type="button" class="btn btn-primary btn-lg span4 "><h3>NOW PLAYING</h3></button>
    <button ng-click="comingSoon()" type="button" class="btn btn-default btn-lg span4 "><h3>COMING FRIDAY</h3></button>
    <div class="span2"></div>
      </div>
    </nav>

    <div id='content' class='row-fluid'>

      <div class='span8 info'>
        <h2 ng-controller = "movieController">{{movies.title}}</h2>
    <h2 ng-controller = "movieController">RATED: {{movies.mpaa_rating}}</h2>
    <h2 ng-controller = "movieController">{{movies.runtime}} Minutes</h2>
    <p ng-controller = "movieController">DESCRIPTION: {{movies.synopsis}}</p>
      </div>

      <div class='span4 poster'>
        <img ng-controller = "movieController" src={{movies.posters.original}} alt={{movies.title}} class="img-responsive">
      </div>

    </div>

    <div>
        Note: This theator only plays one movie at a time. film will be hard coded into the app. Would like to see it fed by RSS orsomething in the future.
    </div>

  </div> <!-- END WRAPPER -->

</body>
</html>

JS

var movies = angular.module('movies', []);

    movies.controller('movieController', function ($scope, $http) {

        $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/771303861.json', {
            params: {
                apikey: 'wq98h8vn4nfnuc3rt2293vru',
                callback: 'JSON_CALLBACK'
            }
        })
        .success(function (data) {
            $scope.movies = data;
        }); 

    });

   movies.click('nowShowing', function ($scope){
       alert("asdasd");
   });

直到我真正得到这个并且可以停止提出愚蠢的问题需要多长时间？

Answer 1

您的.click功能不属于您。你正在使用像jQuery这样的Angular，它比那更令人敬畏。您需要将nowShowing函数放在控制器中：

var movies = angular.module（'movies'，[]）;

movies.controller('movieController', function ($scope, $http) {

    $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/771303861.json', {
        params: {
            apikey: 'secret',
            callback: 'JSON_CALLBACK'
        }
    })
    .success(function (data) {
        $scope.movies = data;
    });

    $scope.nowShowing = function(){
          //whatever is in here will execute when a user interacts with an element with the ng-click="" directive    
    } 

});

此外，我高度建议您为您的api的http请求创建服务。您正在使用当前的方法创建一个紧密耦合的应用程序。

movies.factory('moviedata',function($http){

return 

    $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/movies/771303861.json', {
        params: {
            apikey: 'secret',
            callback: 'JSON_CALLBACK'
        }
    })

})

然后在控制器中“注入”它，如下所示：

movies.controller('movieCtrl',function($scope, moviedata){

   //resolve returned promise
   moviedata.success(function(data){
        $scope.data = data;
    });

    $scope.nowShowing = function($log){
          //whatever is in here will execute when a user interacts with an element with the ng-click="" directive
      $log.info("nowShowing method fired");


    }


})

ng-click有点像

1 个答案: