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

时间:2016-04-12 18:09:40

标签: javascript jquery angularjs

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

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

3 个答案:

答案 0 :(得分:2)

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

//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。

答案 1 :(得分:0)

您应该使用角度指令

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


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

答案 2 :(得分:-2)

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

修改

angular ng-clickng-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;
      }

})