我在AngularJS中使用dotdotdot JQuery插件时遇到了小问题。有我的HTML代码：
<div class="col-md-2 col-sm-6 col-xs-12" ng-repeat="video in videos track by $index">
<a href="{{thumbsPath + video.thumbnail}}" class="thumb">
<div class="thumbnail">
<img ng-src="{{thumbsPath + video.thumbnail}}" alt="">
<div class="caption">
<p class="video-title" dotdotdot>{{video.name}}</p>
</div>
</div>
</a>
</div>
这是我的dotdotdot指令：
videoControllers.directive('dotdotdot', function() {
return function(scope, element, attrs) {
$(element).dotdotdot({'watch':true});
};
});
我想缩短{{video.name}}，但是当我添加dotdotdot时-它不显示{{video.name}}的内容，而是显示文本：“ {{video.name}}”。我几乎阅读了有关该主题的所有帖子，但没有任何帮助。
最佳答案
您应该在指令中调用scope。$ apply。这将导致您的控制器更新模型。请参阅下面的示例
编辑
需要添加require：'ngModel'以便每次更新
编辑2
原来，您应该使用指令的compile属性，而在ng-repeat中使用指令时不要链接
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.videos = [{
name: 'Pool',
thumbnail: 'http://img.youtube.com/vi/dXo0LextZTU/0.jpg'
}, {
name: 'Pool2',
thumbnail: 'http://www.shender.com/db_picture/pro19/201105251714246730.jpg'
}];
});
app.directive('dotdotdot', function() {
return {
restrict: 'A',
compile: function(scope, element, attrs) {
return {
pre: function(scope, element, attrs) {
$(element).dotdotdot({
'watch': true
});
}
};
}
};
});<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.4/jquery.dotdotdot.min.js"></script>
<link rel="stylesheet" href="style.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body ng-controller="myController">
<div class="col-md-2 col-sm-6 col-xs-12" ng-repeat="video in videos track by $index">
<a href="{{thumbsPath + video.thumbnail}}" class="thumb">
<div class="thumbnail">
<img ng-src="{{thumbsPath + video.thumbnail}}" alt="">
<div class="caption">
<p class="video-title" dotdotdot>{{video.name}}</p>
</div>
</div>
</a>
</div>
</body>
</html>