Question

我是棱角分明的新人，有点困惑。所以基本上我创建了一个简单的按钮，我希望运行函数foo() whitch将变量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 = function（）{}

在您的控制器中，然后这项工作为您

Answer 2

当你从html调用控制器函数时，控制器函数应该是作用域。其他明智的ng-click指令无法识别该函数。

同样的概念是将变量绑定到html。只有范围变量可以使用大括号直接绑定到html。所以在foo函数var on内部应该分配给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上生效

2 个答案: