使用OnClick函数(AngularJS）创建指令

Creating a directive with OnClick function (AngularJS)

本文关键字：创建 指令 AngularJS OnClick 函数 使用      更新时间：2024-05-05

我是angular的新手，在过去的半天里我一直在努力解决这个问题。我很想听听这个案例的最佳实践是什么，因为我已经尝试了不同的方法来实现这一点，但我不确定应该遵循哪一种。

我有一个表，每个表都包含一个指令：我的轮班有一个模板：

<shift day={{day}} shift={{shift}} status={{status}}>
    <img ng-if="pic==0" ng-src="images'dislikeR.png" class="like">
    <img ng-if="pic==1" ng-src="images'likeR.png" class="like">
    <img ng-if="pic==2" ng-src="images'mehR.png" class="like">
</shift>

每个表示一个移位请求，其中值可以是0,1,2意思是"不喜欢"、"喜欢"answers"meh"。

我想要它，这样当我点击元素时，它会在状态0->1->2之间变化相应地，更改"status"属性和显示的图像。到目前为止，我尝试的方法是使用ng-if，正如你所看到的。

如何在指令的每个实例中添加OnClick函数？这是我的尝试，但当我点击时没有触发，我尝试用"shift"代替"This"，但仍然没有成功。

MyApp.directive('myShift',function(){
    return{
        restrict: 'A',
        scope:{
            day: '=',
            shift: '=',
            status: '=',
            pic: "=status"
        },
        templateUrl: "shift.html",
        controller: function($scope, $element) {
            $(this).click(function(){
                alert("TEST")
                if($scope.pic==2)
                    $scope.pic=0;
                else
                    $scope.pic+=1;
            });
        }
    };
});

更新：

一切正常，但图片没有改变，点击后我会增加$scope.status（我检查了它确实增加了），但模板不会刷新。。。不知道为什么，问题不只是ng-if，正则表达式e，g｛｛status｝｝也不更新。可能出了什么问题：|

App.directive('myShift',function(){
    return{
        restrict: 'A',
        scope:{
            day: '=',
            shift: '=',
            status: '='
        },
        templateUrl: "shift.html",
        controller: function($scope, $element) {
            $element.on('click', function(){
                if($scope.status==2){
                    alert($scope.status);
                    $scope.status=0;
                    alert($scope.status);
                }
                else if($scope.status==0){ 
                        alert($scope.status);
                        $scope.status=1;
                        alert($scope.status);
                    }
                    else if($scope.status==1){
                        alert($scope.status);
                        $scope.status=2;
                        alert($scope.status);
                    }
            });
        }
    };
});

MyApp.指令（'myShift'，function（）｛

return{
    restrict: 'A',
    scope:{
        day: '=',
        shift: '=',
        status: '=',
        pic: "=status"
    },
    templateUrl: "shift.html",
    link: function($scope, $element) {
        $element.on('click',function(){

//做点什么听听

        });
    }
};

})；

当您发出指令时，给定的名称将被短划线转换为在您的模板中使用：

例如：

  • "shift"是shift
  • "myShift"是我的轮班
  • "myShiftIsAwesome"是我的轮班很棒

如果你理解这一点，第一个变化是将标签从更改

<shift day={{day}} shift={{shift}} status={{status}}>

至

<my-shift day={{day}} shift={{shift}} status={{status}}>

还有最后一个。

第二个问题是，如果你要使用Angular，开始忘记jQuery，我建议你将指令改为：

MyApp.directive('myShift',function(){
    return{
        restrict: 'A',
        scope:{
            day: '=',
            shift: '=',
            status: '=',
            pic: "=status"
        },
        templateUrl: "shift.html",
        controller: function($scope, $element) {
            $element.on('click', function(){
                if($scope.pic==2)
                    $scope.pic=0;
                else
                    $scope.pic+=1;
            });
        }
    };
});

最后一个是建议，原始代码会起作用。

将restict属性设置为'E'，并使用element而不是this

MyApp.directive('myShift',function(){
    return{
        restrict: 'E',
        scope:{
            day: '=',
            shift: '=',
            status: '=',
            pic: "=status"
        },
        templateUrl: "shift.html",
        controller: function($scope, $element) {
            $element.click(function(){
            });
        }
    };
});

好的，所以使用jQuery为shift元素分配侦听器是不起作用的，像"Jesús Quintana"所说的解决方案是使用原生角度指令。我只是使用指令控制器创建了一个$scope.clickMe=函数（）{..}，并在模板中相应的标记上应用了ng-click="clickMe（）；"。我猜angular只对angular指令在模板中触发的事件敏感，而不是常规的js。

templateUrl: "shift.html",
        controller: function($scope, $element) {
            $scope.clickMe = function(){
                if($scope.status==2){
                    alert($scope.status);
                    $scope.status=0;
                    alert($scope.status);
                }
                else if($scope.status==0){ 
                        alert($scope.status);
                        $scope.status=1;
                        alert($scope.status);
                    }
                    else if($scope.status==1){
                        alert($scope.status);
                        $scope.status=2;
                        alert($scope.status);
                    }
            }

和我的模板：

<shift xday={{day}} xshift={{shift}} xstatus={{status}} ng-click="clickMe();">
    <img ng-show="status==0" ng-src="images'dislikeR.png" class="like">
    <img ng-show="status==1" ng-src="images'likeR.png" class="like">
    <img ng-show="status==2" ng-src="images'mehR.png" class="like">
</shift><br>
相关文章：