2015-09-29 5 views
2

Я не могу отображать выражение в AngularJS. Ниже приведен код HTML.Выражения AngularJS не работают

<!DOCTYPE html> 
<html data-ng-app="appname"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
    <script src="javascript.js"></script> 
</head> 
<body> 
<div data-ng-controller="appCtrl"> 
    <p>{{appname.product.name}}</p> 
</div> 
</body> 
</html> 

Это javascript.js файл:

(function() { 
    var appname = angular.module('appname', []); 

    var gem = { 
     name: "Ring", 
     price: 2.9, 
     Description: "", 
    }; 

    appname.controller('appCtrl', function() { 
     this.product = gem; 
    }); 
}); 

На веб-странице по-прежнему отображается: {{appname.product.name}}.

+1

Вы когда-нибудь ссылались на свою функцию? Я не вижу '()' ближе к концу. – ryanyuyu

+0

Я этого не делал. Я начинающий в angularjava. im обучение через кодовую школу. Спасибо за комментарий – rajkamal

ответ

1

Вам необходимо включить область в контроллере, а также с точки зрения

изменения вы код, как это:

Контроллер:

var appname = angular.module('appname', []); 
appname.controller('appCtrl', function($scope) 
{ 
    $scope.gem = { 
     name:"Ring", 
     price:2.9, 
     Description:"", 
     }; 
}); 

HTML:

<html data-ng-app="appname"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
<script src="javascript.js"></script> 
</head> 
<body> 
<div data-ng-controller="appCtrl"> 
<p>{{gem.name}}</p> 
</div> 
</body> 
</html> 

Здесь является кодовой страницей: http://codepen.io/anon/pen/epgmGd

+0

Это сработало. Спасибо – rajkamal

1

Вы делаете несколько вещей неправильно.

Используйте синтаксис 'как', если вы хотите следовать подходом «это» (в отличие от $ scope).

В разметке:

<div data-ng-controller="appCtrl as app"> 
    <p>{{app.product.name}}</p> 
</div> 

В контроллере:

this.product = { 
     name:"Ring", 
     price:2.9, 
     Description:"", 
     }; 
+0

Спасибо за быстрый отклик .. он работал – rajkamal

1

Есть два способа исправить это:

Первый заключается в использовании $scope путь:

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

appname.controller('appCtrl', function ($scope) { 
    $scope.gem = { 
     name: "Ring", 
     price: 2.9, 
     Description: "", 
    }; 
}); 

Теперь изменить ваш взгляд, как:

<div data-ng-controller="appCtrl"> 
    <p>{{product.name}}</p> 
</div> 

Другой способ, который вы используете это this путь:

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

appname.controller(function() { 
    this.gem = { 
     name: "Ring", 
     price: 2.9, 
     Description: "", 
    }; 
}); 

и изменить свой взгляд, как:

<div data-ng-controller="appCtrl as main"> 
    <p>{{main.product.name}}</p> 
</div> 

Кроме того, как @ryanyuyu упомянутые в комментарии, вам необходимо немедленно вызвать вашу функцию: так:

(function() { 
    // Your code 
})(); // Add() at last 
+0

Это сработало. Спасибо за описание обоих способов – rajkamal

0

Возможно, недокументированный случай.

В моем случае у меня были $window переменные уровня с тем же именем, что и я объявлял на уровне $scope.

После смены имени переменной он сработал.

Странно, так как он распознает переменную уровня $scope в коде js, но когда дело доходит до того, что значение в выражениях становится путаным.

//Global JS variable 
var currentLocationName = "Nice Location"; 

Я копировал эту глобальную переменную на уровне $scope.

$scope.currentLocationName = $window.currentLocationName; 

и иметь его в выражении в моей HTML зрения.

<b>Your current location is {{ currentLocationName }}</b> 

И это не сработало. Я изменил имя на уровне $scope, и он сработал.

Мои два цента!

Смежные вопросы