javascript - 使用带 Angular js 的灰尘模板

Question

我是 angularjs 环境的新手，我想使用 dust 模板来使用 angular，因为当前应用程序有 dust 模板，但我找不到任何关于如何将现有的 dust 模板与 angular js 一起使用的信息。

问题是 dust 模板有不同的语法，而 angular js 模板使用它提供的指令。

所以问题是“有没有办法将我现有的灰尘模板与 Angular js 一起使用”？或者我必须根据 angularjs 规范重写模板。

Answer 1

有一个部分可以在大多数情况下无需大量重写即可工作。我假设您使用的是 Dust 和 Angular 默认设置，因此您需要将双花括号替换为单花括号:

angular.module('myApp', []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{').endSymbol('}');
});

如果您有简单的用例，例如在模板中:

Hello Himanshu, the time is now {time}.

如果您通过 templateUrl 为 Angular 提供该文件(或使用 gulp-angular-templatecache 或其他方式加载它)，您可以这样做:

angular.module('myApp').directive('myTime', ['$scope', function($scope) {
    $scope.time = new Date();
});

这将呈现。但是您需要做很多检查、重命名等工作。

对于更复杂的用例，您必须进行一些重命名、搜索和替换等操作。例如，如果您有一个简单的循环，并希望其中有一个 ng-repeat，您必须替换:

<table name="users">
    {#users}
        <tr>
             <td>{name}</td>
        </tr>
    {/users}
</table>

用这个:

<table name="users">
    <tr ng-repeat="user in users">
         <td>{user.name}</td>
    </tr>

</table>

或者如果你有包含，改变:

{>details}

到

<ng-include="details.html">

您当然可以重复使用某些组件，但问题是您会得到多少以及会得到什么。而且我不确定您可能引入的其他指令如何对单花括号的使用使用react，它们可能会中断，因此您最好也搜索并替换它们。

当然，将它们全部重命名为 .html、.dust 或类似名称，如果它们没有这样命名的话。