Angular.js 输出值在 ng-click 上生效

Question

我是 angular 的新手，对此有点困惑。所以基本上我创建了一个简单的按钮，我想运行函数 foo() 将变量 var one = 1; 分配给 $scope 并在每次单击时将其输出到 <p>{{one}}<p>在实时打字中，但这似乎不起作用。请给我一个解决方案。

<html ng-app="app">
 <!-- Body tag augmented with ngController directive  -->
 <body ng-controller="myController">
   <input type="text" ng-model="name">
   <p>{{name}}</p>
   <p>{{one}}</p>

   <button ng-click="foo()">1</button>

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
   <script src="controller.js"></script>
 </body>
</html>

控制器：

var app = angular.module('app',[]);
app.controller('myController', ['$scope',function($scope){
  var one = 1;

  $scope.name = name;

  function foo(){
    return $scope.one = one;
  }
}]);

Answer 1

函数 foo() 不存在于您的控制器的 $scope 中 "myController"

如果你声明：

$scope.foo = 函数(){}

在你的控制器中，这对你有用

Answer 2

当您从 html 调用控制器函数时，控制器函数应该是作用域。否则 ng-click 指令无法识别该函数。

绑定变量到 html 的概念相同。只有范围变量可以使用大括号直接绑定到 html。所以内部 foo 函数 var one 应该分配给 scope.one 以便在 html.

中显示它

angular.module("app",[])
.controller("ctrl",function($scope){

 var one = 1;
 

  $scope.name = name;
  
  $scope.foo = function(){
      $scope.one = one;
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <input type="text" ng-model="name">
   <p>{{name}}</p>
   <p>{{one}}</p>

   <button ng-click="foo()">1</button>
</div>

Angular.js 输出值在 ng-click 上生效

Angular.js output value live on ng-click

javascript

angularjs

button

angularjs-ng-click