Question

我正在尝试从元素的ng-init调用jquery函数。这可能吗？

<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

您可以在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>

Answer 2

正如评论所建议的，最好使用一个小的指令。示例：

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
}

如何从元素的ng-init调用jQuery函数？

2 个答案: