Fatal编程技术网
  • javascript/
  • Javascript ng click在某种程度上起作用

Javascript ng click在某种程度上起作用

javascript jquery angularjs

Javascript ng click在某种程度上起作用,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我现在正在学习angular js，并且已经走上了另一条路。我试图让我的按钮更改电影ID。我知道它正在识别点击，因为我让它更改HTML文件中的一些单词来测试它。我想它不是在和我的JS文件说话 我在搜索过程中发现了这个。文档的括号中只有一个表达式，本例中有参数。我试了两种方法和其他一些方法，但都不奏效 这是我最近一次失败的尝试。如果我能得到一个正确的方向，我将非常感激 <!DOCTYPE HTML> <html lang = "en" ng-app="movies"><

我现在正在学习angular js，并且已经走上了另一条路。我试图让我的按钮更改电影ID。我知道它正在识别点击，因为我让它更改HTML文件中的一些单词来测试它。我想它不是在和我的JS文件说话

我在搜索过程中发现了这个。文档的括号中只有一个表达式，本例中有参数。我试了两种方法和其他一些方法，但都不奏效

这是我最近一次失败的尝试。如果我能得到一个正确的方向，我将非常感激

<!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>
要多久我才能真正理解并停止问愚蠢的问题？

你的
。单击
功能不属于我。您使用的是类似jQuery的Angular，它比这更（棒）。您需要将
now show
功能等放入控制器中：

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

另外，我强烈建议您为对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");


    }


})



你真的不应该像这样把你真正的api密钥发布到网上。第二个坏掉了我的东西，所以我要把它弄得一团糟，但现在就用第一个吧。它也不起作用，但并没有破坏一切。你让它工作了吗？因为当我在nowShowing中输入一个警报时，当我点击按钮时，什么也不会弹出。不过我还是要继续胡闹。我可能遗漏了一些东西。这只是示例代码，用于演示。您需要使用我描述的方法注入您自己独特的代码。我正在使用第一个示例请原谅我。。。我进行了更新，以显示实际工作的代码。注意对
moviedata
工厂和
movieCtrl
的更改，如第2和第3个窗口所示。另外，你可能会失败，因为你和我对电影控制器的命名略有不同，如果你没有理解，它就不会被正确绑定。我会给你最好的答案，即使我无法让它工作。我认为错误在我这边。我最后只使用了视图。

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


    }


})