jquery - 无法使用 jquery 覆盖 css 属性

Question

我有一个 div，在正常情况下 display:block css 应用于它。还有一个隐藏按钮可以在单击该按钮时隐藏 div。但是 jquery 的

$('#divid').css()

不能覆盖 css propoerty。这是一个示例 fiddle 。 jsfiddle

<div ng-controller="MyController">
   <div id="div1" class="showdiv">This is the div need to hide on click
   <a href='#' ng-click="hidedivfn()">Hide</a>
   </div>
   </div>
</div>

function MyController($scope) {
  $scope.hidedivfn=function(){
  $('#div1').css({ 'display': "none!important" });
  }

}

.showdiv{
  display:block;
}

Answer 1

不要在 angularjs Controller 中使用 jquery。不要在 anchor 中使用散列。它会尝试导航。使用按钮。请阅读更多基础知识。尝试如下，

  <div ng-controller="MyController">
       <div id="div1" ng-if="div.show">This is the div need to hide on click
       <a ng-click="hidedivfn()">Hide</a>
       </div>
       </div>
    </div>

    function MyController($scope) {
$scope.div={show:true};
      $scope.hidedivfn=function(){
      $scope.div.show=false;
      }

    }