问题描述
我在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}}，但是当我添加点号时-它不会显示{{video.name}}的内容，而是显示文本：“ {{video.name}}”。 我几乎阅读了有关该主题的所有帖子，但没有任何帮助。
1楼
Vincent F
0
2015-07-26 15:06:17
您应该在指令中调用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>