Javascript 使用OnClick函数（AngularJS）创建指令

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

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

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

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

更新：

一切正常，但图片没有改变，单击我会增加$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.directive（'myShift'，function（）{

//做点什么，听到吗

        });
    }
};

---

}))

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

例如：

• “移位”就是移位
• “我的班次”是我的班次
• “Myshift Isawesome”是我最棒的转变

如果您理解这一点，第一个更改是将标记更改为：

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

---

最后一个是建议，原始代码将正常工作。

将

restict

属性设置为“E”，并使用

元素

而不是

此

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”所说的解决方案是使用本机angular指令。我只是使用指令控制器创建了一个$scope.clickMe=function（）{..}，并在模板中相应的标记上应用了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 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>    

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

Try$element.on（'click'，function（）{}）

$scope.pic=$scope.pic+1%2

使用mod，还可以使用

$element。在（'click'，function（）{}）

上，如果您的指令名是myShift，那么除了使用Tim Dau和Jes Quintana的注释外，不要使用

=

绑定与

status=“{status}}”

不匹配或

@

绑定。谢谢您的回答$element.on成功了。但是，对$scope.pic的更改似乎不会影响模板ng if。图像不会改变。谢谢你的回答$element.on成功了。但是，对$scope.pic的更改似乎不会影响模板ng if。图像没有改变。嗯，可能scope指令中的这一行给您带来了麻烦，pic:“=status”，用它代替pic:“=”一切正常，单击我会增加$scope.status（它会增加我选中的值），但是模板不会刷新。。。不知道为什么，问题不仅仅在于ng if，正则表达式e，g{{{status}}也不会更新。可能有什么问题：|。我在想可能需要使用$scope.$apply来执行摘要，因为on.click不是本机事件

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>