Django和AngularJS有冲突的符号

分享于 

3分钟阅读

Angular

  繁體

在这个快速技巧文章中,看到如何改变AngularJS中的符号以避免这些冲突。

AngularJS提供$interpolateProvider,允许开发人员自定义符号,默认为{ {} }

简单AngularJS例子

看一个简单的例子:

在模板文件夹中创建基本模板ng-base.html文件,然后添加以下内容


{ % load staticfiles % }
<!DOCTYPE html>
<html lang="en" ng-app='demoApp'>
 <head>
 <base href="/">
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Integrate Angular 1.6.6 with Django</title>

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js'></script>
 <script src='{ % static"js/app.js" % }' ></script>


 </head>
 <body>
 <div class='content'>
 { % block content % }{ % endblock content % }
 </div>
 <div ng-controller="TestController as ctrl">
 {$ ctrl.mymodel $}
 </div>
 </body>
</html>

接下来在项目的静态文件夹中创建js/app.js,并添加以下代码来创建一个新的AngularJS应用程序,并在config函数中插入$interpolateProvider


'use strict';

var app = angular.module('demoApp', []);


app.config(function($locationProvider,$interpolateProvider){
 $locationProvider.html5Mode({
 enabled:true
 });
 $interpolateProvider.startSymbol('{$');
 $interpolateProvider.endSymbol('$}');


 }); 

app.controller('TestController', function() {
 this.mymodel = "I'm using the custom symbols";
});


我们已经插入内插提供程序$interpolateProvider,然后使用两种方法 $interpolateProvider.startSymbol('{$');$interpolateProvider.endSymbol('$}'); 将默认符号更改为自定义符号。

现在您可以将{{和}}用于Django模板,将{$和$}用于AngularJS模板。


INT  angular  插值  冲突  
相关文章