[英]Manipulating DOM with AngularJS
我試圖使用指令使用angularjs操作我的表。
我想將新類添加到id = 2的第一個td中,如下所示:
gameApp.directive('mapActivity', function() {
return {
link: function(scope, element, attrs) {
angular.element('.click#1').addClass('dotted');
}
};
});
我試圖在這里“使用”指令:
<map-activity>
<table ng-bind-html="safeHtml()">
</table>
</map-activity>
但是什么也沒發生。 第一個TD沒有獲得“點綴”類。 我做錯了什么?
這是我的控制器:
var gameApp = angular.module("gameApp", ['ngRoute','ngSanitize']);
gameApp.service('link', function() {
this.user = false;
});
gameApp.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
});
gameApp.directive('mapActivity', function() {
return {
priority: 1,
restrict: 'A',
link: function(scope, element, attrs) {
angular.element('.click#1').addClass('dotted');
}
};
});
function makeTableFrom(str) {
var k = 1;
result = "";
for(var i = 1; i <= 8; i++) {
result += '<tr>';
for(var j = 1; j <= 20; j++) {
if(str[k] == '#') {
result += '<td id=' + k + '">#</td>';
}
else if(str[k] == '&') {
result += '<td class="click" val="water" id="' + k + '">&</td>';
}
else {
result += '<td class="click" id="' + k + '"><a href="#"></a></td>';
}
k++;
}
result += '</tr>';
}
return result;
}
gameApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/firstpage.html',
controller : 'firstPageCtrl'
})
.when('/game', {
templateUrl : 'partials/game.html',
controller : 'gameCtrl'
});
});
gameApp.controller("firstPageCtrl", function($scope,$http,link,$location) {
$scope.doLogin = function() {
$http.post("lib/action.php", {username: $scope.username, password: $scope.password}).success(function(data) {
if(data) {
link.user = data;
console.log(link.user);
$location.path("/game");
}
}).error(function(data) {
console.log(data);
});
};
});
gameApp.controller("gameCtrl", function($scope,$http,link,$location,$sce) {
//$scope.trr = [1,2,3,4,5,6,7,8];
//$scope.tdd = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
$scope.getMonsters = "1";
var map;
$http.post("lib/action.php", {monsters: $scope.getMonsters}).success(function(data) {
map = data;
console.log(map);
$scope.result = makeTableFrom(data);
console.log($scope.result);
});
$scope.safeHtml = function() {
return $sce.trustAsHtml($scope.result);
};
if(link.user) {
/*$scope.message = "fisk";
console.log(link.user);*/
} else {
/*$scope.message = "Ledsen fisk";
console.log("Är inte satt");*/
}
});
如您所見,Im使用javascript函數來確定HTML變量,然后在我的視圖中使用它,將其通過過濾器。
當我按Ctrl + u查看頁面源時,看不到正在打印的td和tr。 這會影響為什么它不起作用嗎?
嘗試為map-activity
指令分配不同的priority
,因此它將在ng-bind-html
正如@Abhishek Jain和@Dalorzo所指出的那樣,您的指令必須屬性應用於相同的DOM元素
.directive('mapActivity', function() {
return {
priority: 0, // check what priority ng-bind-html have and set it to be more than that.
link: function(scope, element, attrs) {
...
}
}
})
優先
當在單個DOM元素上定義了多個指令時,有時有必要指定指令的應用順序。 優先級用於在調用指令的編譯函數之前對它們進行排序。 優先級定義為數字。 首先編譯具有更高數字優先級的指令。 鏈接前功能也按優先級順序運行,但鏈接后功能則以相反順序運行。 具有相同優先級的指令的順序是不確定的。 默認優先級為0。
您需要將該指令添加到要附加到其的標簽中。 在指令聲明中,您已將myDirective聲明為屬性指令,但在html中將其用作元素指令。
假設.click#1選擇器對應於第一個td,並且您希望該指令為屬性,則需要執行以下操作:
<table ng-bind-html="safeHtml()" map-activity>
編輯:-
如果要定位每行的第一個td,則只需定義如下指令即可:
app.directive('mapActivity', [function(){
return {
restrict: 'A',
link: function($scope, iElm, iAttrs, controller) {
iElm.find('tr td:first-of-type').addClass('dotted');
}
};
}]);
您正在執行的操作有點奇怪,因為您正在執行的操作是創建一個新元素,而不是使用屬性修改當前表元素,例如:
<table ng-bind-html="safeHtml()" map-Activity="">
</table>
然后:
gameApp.directive('mapActivity', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(attr.ngBindHtml, function(value) {
angular.element('.click#1').addClass('dotted');
});
}
};
});
此外,請確保您使用限制屬性指定要使用哪種類型的指令A =屬性,E =元素,C =類等...這些可以組合使用restrict: 'EAC',
您的示例版本中的link
函數將首先執行,此外,某些瀏覽器在理解未知元素方面會遇到困難,因此,最好在表級移動指令。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.