从HTML页面调用Bootstrap函数

Call Bootstrap function from HTML page

本文关键字：Bootstrap 函数 调用 HTML      更新时间：2023-09-26

Am试图调用angular js函数，但它说"无法读取属性‘忘记’未定义"请帮助解决此

我使用以下js代码

var rootApp = angular.module('rootApp', ['firstApp','secondApp']);
var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
  alert("First app ");
});
var secondApp = angular.module('secondApp', []);
secondApp.controller('SecondController', function($scope) {
  alert("Second app. ");
 $scope.forget = function () {
 alert("forget function calling ");
 }
});

在html中，我使用下面的行来调用这个函数。

angular.element(document.getElementById('SecondController')).scope().forget();

将此代码放入控制器中

$scope.forget = function () {
   alert("forget function calling ");
}

我更希望您有一些div的id，您使用的是ng-controller='SecondController'。例如，

<div id="controllerContainer" ng-controller='SecondController'>
</div>

然后使用以下代码调用函数：

var $scope = angular.element($('#controllerContainer')).scope();
$scope.forget();
$scope.$apply();

我使用过jQuery选择器，但您也可以尝试使用纯javascript选择器。

通过jQuery选择器检索范围是一种破解方法

<div ng-controller="MainCtrl">
    <button ng-click="forget()">Forget</button>
</div>

div中的DOM元素可以访问MainCtrl的作用域，所以只需要在控制器中定义函数：

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.forget = function forget() {
        // insert forget logic here
    }
}]);

请注意用于定义控制器的数组表示法。如果你想缩小代码，这一点很重要，因为angular在很大程度上依赖于依赖字符串值。这里有一个样品plnkr供你试验。

我不知道你到底想做什么，但Angular的工作方式不同。我猜您正试图在加载DOM时调用"forget（）"。如果这是一种情况，那么你的做法是错误的。

错误的方法angular.element（document.getElementById（'SecondController'））.scope（）.forget（）；

最佳方法

            var rootApp = angular.module('rootApp', ['firstApp', 'secondApp']);
            var firstApp = angular.module('firstApp', []);
            firstApp.controller('FirstController', function ($scope) {
                alert("First app ");
            });
            var secondApp = angular.module('secondApp', []);
            secondApp.controller('SecondController', function ($scope) {
                alert("Second app. ");
                $scope.forget = function () {
                    alert("forget function calling ");
                }
                init();
                function init() {
                    $scope.forget();
                }
            });

否则，若你们试图在点击按钮或其他什么的时候调用这个"忘记"方法，那个么你们需要遵循下面的方法。

        <div id="controllerContainer" ng-controller='SecondController'>
           <input type='button' ng-click='forget()' value='Click me'>
         </div>
相关文章：