Могу ли я иметь функции JavaScript внутри фигурных скобок/обозначений AngularJS?
Я пробовал код ниже. Если вы не комментируете мои функции JS, они не работают.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<p>Some formula: {{ 1+2 }}</p>
<!--
<p>Some function: {{Math.sin(12)}}</p>
<p>Some constructor: {{new Date()}}</p>
-->
</div>
Можно ли разблокировать/включить?
ОБНОВИТЬ
Хорошо, в простых функциях {{}}
можно заключить в UDF. Но как насчет функций внутри шаблона ячейки в интерфейсе пользовательского интерфейса? Я все еще могу использовать простые формулы там, но не могу использовать какие-либо функции, даже UDF, определенные в $scope
.
В приведенном ниже примере cellTemplateWorks
использует простое добавление, и оно работает. Шаблон cellTemplateNotWorks
использует вызов myFunction
и не работает в шаблоне (хотя работает простым заполнителем).
var myApp = angular.module('myApp', ['ui.grid', 'myControllers']);
var myControllers = angular.module('myControllers', []);
myControllers
.controller('MyController', ['$scope', function ($scope) {
$scope.myData = [{"x": 1}, {"x": 2}, {"x": 3}, {"x": 4}, {"x": 5}];
var cellTemplateWorks = "<div \
class=\"ngCellText\" ng-class=\"col.colIndex()\"><span ng-cell-text>\
{{row.entity[col.field]+1}}\
</span></div>";
var cellTemplateNotWorks = "<div \
class=\"ngCellText\" ng-class=\"col.colIndex()\"><span ng-cell-text>\
{{myFunction(row.entity[col.field])}}\
</span></div>";
$scope.gridOptions = {
data: 'myData',
columnDefs: [
// {field: 'x', displayName: 'x', },
// {field: 'x', displayName: 'sin(x)', cellTemplate: cellTemplateNotWorks},
{field: 'x', displayName: 'sin(x)', cellTemplate: cellTemplateWorks},
]
};
$scope.myFunction = function(arg) {
return Math.sin(arg);
};
}]);
.myGrid {
width: 500px;
height: 250px;
}
<link rel="styleSheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.js"></script>
<body ng-app="myApp">
<div ng-controller="MyController">
<p>MyFunction does work: {{myFunction(12)}}</p>
<p>MyFunction does not work in UI Grid:
<div ui-grid="gridOptions" class="myGrid"></div>
</p>
</div>
</body>
Цитата из документации:
Угловые выражения или выражения JavaScript Угловые выражения похожи на выражения JavaScript со следующими отличиями:
Контекст: JavaScript-выражения вычисляются в глобальном окне. В Angular выражения вычисляются относительно объекта области видимости.
Прощание. В JavaScript попытки оценить неопределенные свойства генерируют ReferenceError или TypeError. В Angular выражение выражение прощает неопределенные и null.
Нет управляющих указаний потока: вы не можете использовать следующие выражения в выражении: условные, циклы или исключения.
Нет объявлений функций: вы не можете объявлять функции в выражении с угловым выражением, даже внутри директивы ng-init.
Нет создания RegExp с условными обозначениями: вы не можете создавать регулярные выражения в выражении с угловым выражением.
No Object Creation With New Operator: вы не можете использовать новый оператор в выражении с угловым выражением.
Нет Comma и Void Operators: вы не можете использовать или void операторов в выражении с угловым выражением.
Фильтры. Вы можете использовать фильтры в выражениях для форматирования данных перед их отображением.
Если вы хотите запустить более сложный код JavaScript, вы должны сделать его методом контроллера и вызвать метод из вашего представления. Если вы хотите самостоятельно выражать() выражение Angular, используйте метод $ eval().
В последнем абзаце объясняется предлагаемый способ реализации этого.
ОБНОВИТЬ:
Похоже, вы используете сетку пользовательского интерфейса. Причина, по которой выражение не работает, состоит в том, что эта сетка имеет разную область действия, чем та, в которой вы объявили свою функцию. Если вы хотите получить доступ к объему контроллера, вы должны использовать grid.appScope
:
var cellTemplateNotWorks = "<div \
class=\"ngCellText\" ng-class=\"col.colIndex()\"><span ng-cell-text>\
{{grid.appScope.myFunction(row.entity[col.field])}}\
</span></div>";
В этом примере вы можете получить доступ к myFunction
внутри шаблона с помощью grid.appScope
.
$scope
и вызовите эту функцию.
Нет, в AngularJS вы можете вызвать функцию через "Curly craces"
Вы не можете объявить функцию таким образом.