Как вызвать функцию jQuery из ng-init элемента?

Question

Я пытаюсь вызвать функцию jquery из ng-init элемента.Возможно ли это?

<div class="row bottom-border" ng-init="aJqueryFunction();">
    <div class="col-xs-2 label-value">
        <div class="canvas-wrap-task">
            <canvas id="canvaspending{{$index}}" width="50" height="50"
                ng-bind="drawRequestCountCircles(test.Total, test.Pending, 'canvaspending{{$index}}','')">
            </canvas>
        </div>
    </div>
</div>

Answer 1

Как следует из комментария, вам лучше с небольшой директивой.Пример:

angular.module('myApp').directive('doSomething', function() {
  return {
    scope: {
      doSomething: '&'
    },
    link: function link(scope, element) {
      /*
        here you can "call a jQuery function"
        or work on the $(element)
        or pass a $scope function by do-something="myfunction()"
      */
      if (scope.doSomething) scope.doSomething()
    }
  }
});

Используйте это так

<div class="row bottom-border" do-something>

или

<div class="row bottom-border" do-something="myFunction()">

, где вы определили myFunction в контроллере $scope с помощью

$scope.myFunction = function() {
  //do something
}

Answer 2

Вы можете применить функцию создания в angularjs для вызова обычной функции javascript.

Итак, ng-init вызов события для функции angularjs, который вызовет javascript для запуска ее функции.

ПроверкаПример ниже:

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

app.controller("MainCtrl", function ($scope) {
    $scope.myNGfunction = function () {
        aJqueryFunction();
    };
});

function aJqueryFunction() {
    alert('this is aJqueryFunction, cool!');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <div ng-init='myNGfunction();'>
            Hi there
        </div>
    </div>
</div>