AngularJS 控制器中定义的 JS 函数不起作用
JS function defined in AngularJS controller not working
以下是我的控制器代码:
app.controller('HomeController', ['$scope', '$location', '$sce', '$routeParams', '$timeout', function($scope, $location, $sce, $routeParams, $timeout ) {
// Configuration Variables:
$scope.title = "Site Title";
$scope.logosrc = "images/site_logo.gif";
$scope.tagline = "This is the new tagline!!!";
// This changes the shadowed aspect of the top nav and footer based on a checkbox
$scope.shadowChange = function(cb){
alert ("hi");
return true;
};
// This converts any HTML code in the text to actual code so that it renders properly
$scope.renderHtml = function(html_code)
{
return $sce.trustAsHtml(html_code);
};
}]);
我在我的代码中使用复选框上的 onClick 调用 shadowChange 函数,如下所示:
<input type="checkbox" name="shadow" id="shadow" checked onClick="shadowChange(this);" />
我不仅将 HomeController 绑定到 body 标签,我还(以防万一)使用 HomeController 将相关代码包装在另一个 div 中,Chrome Inspector 甚至告诉我 HomeController加载正常。
此外,控制器顶部的那些配置变量正在正确设置。
但是,当我单击该复选框时,我收到一条错误消息,指出 shadowChange 未定义。如果我尝试(只是为了测试)那里的另一个函数 renderHtml,我会得到同样的错误。然而,在我的另一个应用程序中,我以完全相同的方式使用它并且工作正常。
我看不出是什么阻止了代码查看函数。
想法?
您想使用 ng-click
指令来访问控制器的范围。 (而不是 onClick
)
<input type="checkbox" name="shadow" id="shadow" checked ng-click="shadowChange(this);" />
以下是我的控制器代码:
app.controller('HomeController', ['$scope', '$location', '$sce', '$routeParams', '$timeout', function($scope, $location, $sce, $routeParams, $timeout ) {
// Configuration Variables:
$scope.title = "Site Title";
$scope.logosrc = "images/site_logo.gif";
$scope.tagline = "This is the new tagline!!!";
// This changes the shadowed aspect of the top nav and footer based on a checkbox
$scope.shadowChange = function(cb){
alert ("hi");
return true;
};
// This converts any HTML code in the text to actual code so that it renders properly
$scope.renderHtml = function(html_code)
{
return $sce.trustAsHtml(html_code);
};
}]);
我在我的代码中使用复选框上的 onClick 调用 shadowChange 函数,如下所示:
<input type="checkbox" name="shadow" id="shadow" checked onClick="shadowChange(this);" />
我不仅将 HomeController 绑定到 body 标签,我还(以防万一)使用 HomeController 将相关代码包装在另一个 div 中,Chrome Inspector 甚至告诉我 HomeController加载正常。
此外,控制器顶部的那些配置变量正在正确设置。
但是,当我单击该复选框时,我收到一条错误消息,指出 shadowChange 未定义。如果我尝试(只是为了测试)那里的另一个函数 renderHtml,我会得到同样的错误。然而,在我的另一个应用程序中,我以完全相同的方式使用它并且工作正常。
我看不出是什么阻止了代码查看函数。
想法?
您想使用 ng-click
指令来访问控制器的范围。 (而不是 onClick
)
<input type="checkbox" name="shadow" id="shadow" checked ng-click="shadowChange(this);" />