Manipulating DOM with AngularJS
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");*/
}
});
正如你所看到的,我使用一个javascript函数与HTML分配一个变量,然后在我的视图中使用它,通过过滤器传递它。
当我按Ctrl+u查看页面的源代码时,我看不到正在打印出来的td和tr。这会影响到为什么它不起作用吗?
尝试将不同的priority
分配给map-activity
指令,以便在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元素上定义了多个指令时,有时有必要指定指令执行的顺序应用。优先级用于排序指令之前的指令编译函数被调用。优先级定义为一个数字。具有更高数值优先级的指令首先被编译。Pre-link函数也按优先级顺序运行,但是是post-link函数以相反的顺序运行。带有相同优先级未定义。默认优先级为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= attribute, E= Element, C= Class,…restrict: 'EAC',
示例版本中的link
函数将首先执行,另外一些浏览器将难以理解未知元素,正因为如此,最好在表级别移动您的指令。
- Upload with angularjs and rails 4
- angularJS $http.get communicating with API
- Global Ajax error handler with AngularJS
- Angularjs slider with ng-change
- RequireJS with Angularjs 用于在同一页面上加载控制器
- Angularjs with dynamic model in ng-repeat
- AngularJS with TypeScript Uncaught Error: [$injector:moduler
- Angularjs with Packery.js
- AngularJs with iframe
- Angularjs with redux
- AngularJS with Facebook SDK
- AngularJS with Apache Tiles
- AngularJS with velocity
- AngularJS with jQuery Plugin
- AngularJS With Highcharts WITHOUT JQuery
- AngularJS with StreamSaver.js Support
- AngularJS with Karma Unknown provider: $routeProvider
- Using Angularjs with Breeze
- AngularJS with UI-Route and Master Detail
- Angularjs with bootstrap Modal