ramesh ramesh - 4 months ago 10
AngularJS Question

AngularJS not working with Flask

I have this simple app:

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>working app</title>
<script type="text/javascript" src="static/js/angular.min.js"></script>

<script type="text/javascript">
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.message = "Howdy!!";
}])
.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('{a');
$interpolateProvider.endSymbol('a}');
}]);
</script>
</head>

<body ng-app="myApp">
<h1>Hello!</h1>
<div ng-controller="myCtrl">
<span>{message}</span>
<span>{{ '{{message}}' }}</span>
</div>


</body>


I'm getting
{message} {{message}}
in
html
page not scope value. I don't have any idea, where I'm going wrong. I really appreciate any sort of help in this!

Answer

To achieve your expected result, use below option to bind your scope value

{a message a} Start tag and end tag should be '{a' and 'a}' respectively without {{}} inside them

HTML:

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>working app</title>


    <script type="text/javascript">

    </script>
</head>

<body ng-app="myApp">
<h1>Hello!</h1>
    <div ng-controller="myCtrl">

        <span>{a message a}</span>
    </div>


</body>

JS:

angular.module('myApp', [])
            .controller('myCtrl', ['$scope', function($scope) {
                $scope.message = "Howdy!!";
            }])
            .config(['$interpolateProvider', function($interpolateProvider) {
                    $interpolateProvider.startSymbol('{a');
                    $interpolateProvider.endSymbol('a}');
            }]);

Codepen= http://codepen.io/nagasai/pen/JKrVgV

Comments