img src on img clickjj

我正在用angularjs創建一個座位預訂系統。席位以矩陣形式顯示。並且要求是每當我選擇一個空座位時，img src應該改爲所選座位。img src on img clickjj

在Angularjs的學習曲線中，我不確定如何實現這一點。我的HTML顯示座位佈局是動態生成的。我正在使用指令在運行時嵌入HTML。還使用指令來處理圖像上的圖像src變化點擊。

創建一個plnkr此： - http://plnkr.co/edit/EemPUIKglSz6j1zQss4i?p=preview

我的HTML

<body> 
    <h1>Compile dynamic HTML</h1> 
    <div ng-controller="MyController"> 
     <textarea ng-model="html"></textarea> 
     <div dynamic="html"></div> 

    </div> 
    </body>

我的控制器

var app = angular.module('app', []); 

app.directive('dynamic', function ($compile) { 
    return { 
    restrict: 'A', 
    replace: true, 
    link: function (scope, ele, attrs) { 
     scope.$watch(attrs.dynamic, function(html) { 
     ele.html(html); 
     $compile(ele.contents())(scope); 
     }); 
    } 
    }; 
}); 

app.directive('change-on-click', function() { 
    return { 
     restrict: 'A', 
     link: function($scope, element,attrs){ 
      element.bind('click', function(){ 
       attrs.$set('src', 'C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_sleeper_selected.jpg'); 
      }) 
     } 
    } 
}); 

function MyController($scope,$sce) { 
    $scope.click = function(arg) { 
    alert('Clicked ' + arg); 
    } 
    var str = ["<table frame='box'><tbody>" 
, "<tr>" 
, "<td><img id=1 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img id=4 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img id=8 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img id=12 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img id=16 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img id=20 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img id=24 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img id=28 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img id=32 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img id=36 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img id=40 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img id=44 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "</tr>" 
, "<tr>" 
, "<td><img title='Avaliable' change-on-click id=2 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=5 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=9 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=13 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=17 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=21 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=25 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=29 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=33 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=37 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=41 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=45 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "</tr>" 
, "<tr>" 
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>" 
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>" 
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>" 
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>" 
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>" 
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>" 
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>" 
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>" 
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>" 
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>" 
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>" 
, "<td><img title='Not a seat' id=46 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "</tr>" 
, "<tr>" 
, "<td><img title='Avaliable' change-on-click id=3 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=6 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=10 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=14 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=18 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=22 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=26 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=30 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=34 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=38 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=42 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=47 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "</tr>" 
, "<tr>" 
, "<td><img id=Mobile src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_unavailable.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=7 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=11 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=15 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=19 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=23 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=27 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=31 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=35 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=39 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=43 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "<td><img title='Avaliable' change-on-click id=48 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>" 
, "</tr>" 

, "</tbody></table>"]; 
    $scope.html = $sce.trustAsHtml(str.join('')); 

}

來源

2015-01-05 VikramK

你的屬性必須是蛇的情況下在你的HTML，但駱駝案件在您的指令定義：

app.directive('changeOnClick', function() {

來源

2015-01-05 11:55:08 pixelbits

非常感謝。這樣一個小錯誤。再次感謝 – VikramK

有沒有什麼方法可以在我的指令中獲得像src或title這樣的其他特性的價值？ – VikramK

您可以通過attr對象（傳遞給您的鏈接函數的第三個參數）獲取它們：attr.src，attr.title – pixelbits

img src on img clickjj

回答

相關問題