Question

下面的简单jQuery不会在我的角度Web应用程序中运行。它在控制台中运行，但作为外部文件包含时不会被读取。运行相同文件中的其他脚本，但这不会。有什么想法吗？我怎么能用正确的Angular方式重写下面的内容（我目前对角度很新）。

$("#button").on("click", function() {
   $('input.ng-pristine').show(); //class selector for the div to show
});

Answer 1

如何以角度方式执行此操作背后的一般想法就是这样

//your button
<button id="button" ng-click="clickButton()">your button </button>
//your input to hide
<input ng-show="!hideInput" />

在控制器中

 $scope.clickButton = function() {
      $scope.hideInput = !$scope.hideInput;
 };

现在，我不知道你是否有特殊的用例来展示和隐藏它，但是这个按钮会按原样切换show / hide。如果您打开和关闭它，您可以进一步简化它：

 <button id="button" ng-click="hideInput = !hideInput">your button </button>

如果您不希望它切换，这可能不适合您，但想法是$ scope.hideInput是一个布尔值，它控制输入上的ng-show或ng-hide。

Answer 2

您应该使用角度指令

<input type="button" value="Click me" ng-click="myFunction()">


// In your angular controller
$scope.myFunction = function() {
   // do something
};

Answer 3

正确的方法是使用角度指令

修改

angular ng-click和ng-show将完成这项工作：

代码示例：

在html文件中：

<body ng-app="example.module"> <div ng-controller="myCtrl"> <button id='button' ng-click="show()"> show it! </button> <input class="pristine" ng-show="visible"> </div> </body>

在js文件中：

angular.module('example.module') .controller('myCtrl', function($scope){ $scope.visible = false; $scope.show = function(){ $scope.visible = true; } })

如何在Angular方法中处理下面的jQuery

3 个答案: