2015-04-21 2 views
0

Попытка настроить простой процесс ng-click и прочесть на других страницах об этом. Кажется, что до тех пор, пока он добавляется в область $ scope, он должен работать, но из двух примеров, которые я привел в приведенной ниже странице, ничего не работает (кроме preventDefault()).ng-click ничего не делает, DOM замечает щелчок

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>ng-click test</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 
    <script src="js/DBFScube.js"></script> 
</head> 
<body ng-app="DBFScube" ng-controller="AppCtrl as app"> 
<div style="width: 100%;"> 
    <div id="zoom-controll"><li class="full"><a href="#" ng-click="$event.preventDefault(); $scope.growpane('I am a little thing that needs to do somethign');">Full-screen</a></li></div> 
    <button ng-click="$scope.alert('I am a little thing that needs to do somethign');">Click Me</button> 
</div> 


</body> 
</html> 

И контроллер

var DBFScube = angular.module("DBFScube", ['ngSanitize']); 

DBFScube.controller("AppCtrl", function ($sce, $scope, $http, $filter){ 
    var app = this; 
    // 
    //$http.get("http://localhost:3000").success(function(CubeSides){ 
     // app.CubeSides = CubeSides; 
    //}) 
    $http.get("http://localhost:3000").success(function(CubeSides){ 
     $scope.sides=CubeSides; 
     console.log("Loading data"); 
    }) 
    app.getmenuname = function(side) { 
     if($scope.sides === undefined) { 
      console.log("Not loaded fside " + side); 
     } else { 
      console.log("Got menu pane " + $scope.sides); 
      var fside = $filter('filter')($scope.sides, function (d) {return d.side === side;})[0]; 
      console.log("Sending: " + fside.menuname); 
      return fside.menuname; 
     } 
    } 
    $scope.alert = function(message) { alert(message); } 
    $scope.growpane = function (side) { 
     console.log("You pressed the button, like " + side); 
    } 
    app.showpane = function (side) { 
     console.log("Loading side: " + side); 
     if($scope.sides === undefined) { 
      console.log("Not loaded yet"); 
     } else { 
      console.log("Got page " + $scope.sides); 
      var fside = $filter('filter')($scope.sides, function (d) {return d.side === side;})[0]; 
      var culine = '<iframe src="' + fside.surl + '" height="700" width="700"></iframe>'; 
      console.log(culine); 
      return $sce.trustAsHtml(culine); 
     } 
    } 

}) 

ответ

3

Проблема заключается в том, что вы не должны писать $scope в представлении. Это справедливо для всего, что вам нужно от контроллера, вам никогда не нужно писать $ scope, поскольку вы находитесь в области вашего определенного контроллера.

Ваш вопрос здесь:

<button ng-click="$scope.alert('I am a little thing that needs to do somethign');">Click Me</button> 

Изменить на:

<button ng-click="alert('I am a little thing that needs to do somethign');">Click Me</button> 
+1

Чтобы добавить 2 ответов говоря, не используйте $ рамки с вашей точки зрения ... Я бы также рекомендовать изменения имени этой функции. Кое-что о переопределении оповещения не кажется правильным. – wholevinski

+0

@ dubhov Я побеждаю. vrghost Попробуйте сохранить оригинальные имена для встроенных функций javascript. –

+0

Я буду здесь совершенно честен, кнопка была просто указана там, чтобы увидеть, могу ли я заставить ng-click работать каким-либо образом в форме или форме, и поскольку я ничего не получал в любом сообщении об ошибке, я подумал, что, возможно, это было так или иначе связанные с ли или а. Это будет только первый, который будет использоваться, и теперь он работает хорошо. – vrghost

2

$ сфера не обязательно внутри 'ng- атрибута'. Попробуйте

<button ng-click="alert('I am a little thing that needs to do somethign');">Click Me</button> 
0
<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>ng-click test</title> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 
    <script src="js/DBFScube.js"></script 
    <script> 
    module.angular("DBFScube").controller("AppCtrl",['$scope', function($scope){ 
    $scope.someFun = function(){ 
     alert('I am a little thing that needs to do somethign'); 
    } 
    }]); 
    </script> 
</head> 
<body ng-app="DBFScube" ng-controller="AppCtrl"> 
    <div style="width: 100%;"> 
    <div id="zoom-controll"><li class="full"><a href="#" ng-click="$event.preventDefault(); $scope.growpane('I am a little thing that needs to do somethign');">Full-screen</a></li></div> 
    <button ng-click="someFun()">Click Me</button> 
    </div>  
</body> 
</html> 
Смежные вопросы