Question

使用带有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} }”。我几乎阅读了关于这个主题的每篇文章，但没有任何帮助。

Answer 1

你应该在你的指令中调用范围。$ apply。这将导致您的控制器更新模型。请参阅下面的示例

修改

需要添加要求：＆＃39; ngModel＆＃39;所以每次都会更新

编辑2

事实证明你应该使用指令的编译属性，而不是在ng-repeat中使用指令时链接

＆＃13;

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
          });
        }
      };
    }
  };
});

＆＃13;

<!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>

＆＃13;

AngularJS + dotdotdot插件不起作用

1 个答案: