将 Flexslider 与 Angular.JS 一起使用答案

【问题标题】：Use Flexslider with Angular.JS将 Flexslider 与 Angular.JS 一起使用
【发布时间】：2012-12-07 00:41:53
【问题描述】：

我尝试在网站前端使用 Flexslider 管理响应式滑块，但是当我使用 Angular.js 时，我的图像没有直接指定“src”属性，Angular 使用“ng-src”属性自行管理它。所以我的滑块可以工作（我可以看到导航控件），但是是空白的......

有什么办法解决吗？或者另一个响应式滑块库的想法，应该与 Angular.js 一起使用？

#templates/detail.html
<div class='flexslider'>
    <ul class='slides'>
        <li ng-repeat='slide in project.slides'><img ng-src='{{slide}}' alt='{{project.name}}' /></li>
    </ul>
</div>

#js/app.js
'use strict';

angular.module('test', []).config([
    '$routeProvider',
    function ($routeProvider) {
        $routeProvider
            .when('/', { templateUrl: 'detail.html', controller: ProjectCtrl })
    }
]);

#js/controllers.js
'use strict';

function ProjectCtrl($scope) {
    $scope.project = {
        id: 1,
        name: 'Test',
        slides: [
            'test.png',
            'test2.png'
        ]
    };
$('.flexslider').flexslider();
};

【问题讨论】：

你能证明你在 jsfiddle 或 plunkr 上遇到的问题吗？
嗯，真的很奇怪，但是当我构建一个测试项目时，它可以完美运行，使用相同的代码，但没有相同的环境（Symfony2和Twig），所以也许我的问题来自于此...但我不明白：/
我在开始使用 Angular 时遇到了类似的问题。这一切都是为了更深入地了解 Angular 的工作原理。查看他们的文档并尝试了解一切是如何工作的。我想你就可以弄清楚哪里出了问题！
好的，但我不认为它来自 Angular，因为我的测试项目运行良好......我会再次检查，如果我找到并发布答案。

标签： javascript angularjs flexslider imagesource

【解决方案1】：

实际上是由 Twig 渲染引擎引起的，也使用了双括号：{{ }}

我通过使用 twig 的原始过滤器渲染一些原始 HTML 来修复它： http://twig.sensiolabs.org/doc/filters/raw.html

【讨论】：

另外，仅供参考；在控制器内部进行任何 DOM 操作都是不好的做法。最好将 $('.flexslider').flexslider(); 移动到指令中。