Angular.js - $ scope未被插值

时间:2017-05-19 14:23:28

标签: javascript html angularjs

我有一个Angular.js应用程序,由于某种原因,我无法将$scope对象上的任何内容插入到HTML中。我的MainCtrl控制器和MainFactory可以很好地协同工作,我可以正确地将图形附加到html,只是插入$scope无法正常工作。这是我目前的代码:

编辑:我在视图渲染引擎Swig中使用它

var app = angular.module("myapp", []);

app.controller('MainCtrl', function($scope, MainFactory) {
    $scope.firstName = 'George';

    console.log('scope :', $scope);  // logs the $scope obj correctly but doesn't have my firstName property on it

    MainFactory.fetchBacktestedDataByAllocationId()
    .then(data => {
        // draw and append chart - works fine
    });
});


app.factory('MainFactory', function($http) {
    var MainFactory = {};

    MainFactory.fetchBacktestedDataByAllocationId = function() {
        return $http.get('/path/to/api')
        .then(response => {
            return response.data;
        })
    };

    return MainFactory;
});

HTML:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"
                integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
                crossorigin="anonymous"></script>
        <script src="/widget/assets/d3.version3.js"></script>
        <script src="/widget/assets/backtested-growth/backtested-data-chart.js"></script>
        <script src="/widget/assets/backtested-growth/backtested-growth.script.js"></script>
    </head>

    <body ng-app="myapp">
        <div ng-controller="MainCtrl">

            <div style="width: 100%;">
                <div id="graph-div"></div>
                <br>
                <p>First Name: {{ firstName }}</p>
            </div>

        </div>
    </body>
</html>

我做错了什么?

1 个答案:

答案 0 :(得分:2)

可能是任何其他脚本或视图引擎(如果您使用某些服务器渲染引擎,如handlebar,ejs)也可能使用符号{{

尝试使用此更改角度插值符号

app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
  });

看看是否有效。