Как вызвать стандартные функции JavaScript в шаблонах AngularJS?

0

Могу ли я иметь функции 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>
  • 0
    Насколько я знаю, вы не можете иметь функции внутри фигурных скобок в AngularJS.
Теги:

2 ответа

2
Лучший ответ

Цитата из документации:

Угловые выражения или выражения 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.

  • 0
    Я не вижу никакого запрета на использование вызовов функций. Так почему они не работают?
  • 0
    Они не работают, потому что это не поддерживается. Если вы хотите оценить некоторые сложные выражения, которые включают вызовы функций, просто оберните эту логику в функцию в переменной $scope и вызовите эту функцию.
Показать ещё 9 комментариев
0

Нет, в AngularJS вы можете вызвать функцию через "Curly craces"

Вы не можете объявить функцию таким образом.

  • 0
    Итак, как вызвать функцию, если я могу это?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню