Question

我刚刚接近棱角分明，过去半天我一直试图弄明白这一点。我很高兴听到这个案例的最佳做法，因为我已经尝试了不同的方法来实现这个目标，但我不确定应该遵循哪一个。

我有一个表，其中每个都包含一个指令： my-shift有一个模板：

<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 这意味着＆＃34;不喜欢＆＃34; ，＆＃34;喜欢＆＃34;和＆＃34; meh＆＃34;。

我想要它，所以当我点击它在状态0-> 1＆gt; 2之间改变的元素时因此，改变两个状态＆＃39;属性和显示的图像。我到目前为止尝试的方式是使用ng-if，如你所见。

我如何向指令的每个实例添加一个OnClick函数？这是我的尝试，但是当我点击时没有任何事情发生，我试图更换＆＃34;这个＆＃34;随着＆＃34;转移＆＃34;仍然没有运气。

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);
                    }
            });
        }
    };
});

Answer 1

MyApp.directive（＆＃39; myShift＆＃39;，函数（）{

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

//听一听

        });
    }
};

}）;

Answer 2

当你制作一个指令时，给出的名称是破折号转换为在你的模板中使用：

例如：

＆＃39;移＆＃39;是 shift
＆＃39; myShift＆＃39;是 my-shift
＆＃39; myShiftIsAwesome＆＃39; my-shift-is-awesome

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

<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;
            });
        }
    };
});

最后一个是推荐，原始代码将起作用。

Answer 3

将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(){

            });
        }
    };
});

Answer 4

好的，所以使用jQuery将一个监听器分配给shift元素不起作用，像'JesúsQuintana'这样的解决方案是使用原生的角度指令。我只是使用指令控制器创建了$ scope.clickMe = function（）{..}并应用了ng-click =“clickMe（）;”在模板上的相应标签上。我猜角度只对角度指令而不是常规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>

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

4 个答案: