Question

我是AngularJS的新手。我想做一些非常类似于jquery的语法删除父div的事情。类似的东西：

$(this).parent().remove()

我的整个代码目前是：

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <body>

        <div ng-app="myApp" ng-controller="myCtrl">
            First Name: <input type="text" ng-model="firstName"><br>
            Last Name: <input type="text" ng-model="lastName"><br>
            <br>
            Full Name: {{firstName + " " + lastName}}

            <div>
            <button ng-click="Sample()">DEAN</button>
            </div>
        </div>

        <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
            $scope.Sample = function(){
                $(this).parent().remove()
            };
        });

        </script>

    </body>
</html>

Answer 1

更改您的代码：

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <body>

        <div ng-app="myApp" ng-controller="myCtrl">
            First Name: <input type="text" ng-model="firstName"><br>
            Last Name: <input type="text" ng-model="lastName"><br>
            <br>
            Full Name: {{firstName + " " + lastName}}

            <div>
            <button ng-click="Sample($event)">DEAN</button>
            </div>
        </div>

        <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
            $scope.Sample = function(event){
                angular.element(event.target).parent().remove();
            };
        });

        </script>

    </body>
</html>

更改：

添加$ event参数：

<button ng-click="Sample($event)">DEAN</button>

并更新Sample（）函数：

$scope.Sample = function(event){
    angular.element(event.target).parent().remove();
};

Answer 2

要实现Angular中某些视图元素上绑定的任何逻辑，您需要创建具有适当功能的专用directive。

例如：

＆＃13;

angular.module('myApp', [])
    .directive('buttonToRemove', function() {
      return {
        restrict: 'AE',
        scope: {},
        template: '<div><button ng-click="sample()">DEAN</button></div>',
        link: function(scope, element, attrs, fn) {   
           scope.sample = function() {
              element.remove();
           }
        }
      };
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
  <button-to-remove />
</html>

＆＃13;

PS：您可以更轻松地指定templateUrl并在分隔文件中保留此按钮的布局，而不是在字符串中保留与该指令相关的所有标记格式。

Answer 3

在Html DOM中

<div remove-on-click>
      <button ng-click="Sample()">DEAN</button>
</div>

在控制器之外

app.directive('removeOnClick', function() {
    return {
        link: function($scope, element, attrs) {
            $scope.Sample= function() {
                element.html('');
            };
        }
    }
});

angularjs版本中的$（this）.parent（）。remove（）

3 个答案: