Angularjs 1.3 新控制器作为语法和指令的问题
issue with Angularjs 1.3 new controller as syntax and directive
直到现在我都在使用 Angularjs 1.2 正常的全局控制器语法,但现在我需要移动 1.3 并使用新的控制器作为语法并避免将全局声明作为我们的要求。
现在正在学习中。但是有些我什至无法使其工作的一些简单的基本应用程序。请找到我的Plunker。
我的指令中的 <h2> {{ctrl1.item }}</h2>
和 {{$scope.subItem}}
都没有给出预期的输出。任何人都可以帮助我修复 plunker 以输出项目和子项目。也可以为我提供一些很好的参考资料,以使用 1.3 和示例教程等熟悉这种新语法
在你的 plunker 中删除 $curDir
下次尝试使用 chrome 中的控制台或其他方式。出现错误:
Error: [$injector:unpr] Unknown provider: $curDirProvider <- $curDir <- mainCtrl
http://plnkr.co/edit/NrThd1?p=preview
作为旁注:如果您在 HTML 中看到绑定表达式 {{ }}
,那么通常 AngularJS 在控制台输出中出现错误。
你的指令有问题:
一)
function postLink($scope, $element, $attrs) {
// This is not valid JavaScript
template : '<p> I am from New Directive with Item {{$scope.subItem}}</p>';
}
b) 没有 javascript 将该模板附加到元素。所以在它出现之前你什么都看不到:
$element.append(template);
-- 或--
$element.append(angular.element(template));
c) 一起使用指令的 controller
和 link
对象是没有意义的 - 使用一个或另一个是一个很好的起点。
d) 如果您使用 controller
,则在指令主体内使用绑定表达式 {{ }}
来正常显示数据。另请注意,如果您将控制器用作,请确保这是在您的指令控制器对象中:
function curDirective() {
return {
restrict: 'E',
controller: 'mainCtrl as vm' // <-- see here
};
}
固定:
直到现在我都在使用 Angularjs 1.2 正常的全局控制器语法,但现在我需要移动 1.3 并使用新的控制器作为语法并避免将全局声明作为我们的要求。
现在正在学习中。但是有些我什至无法使其工作的一些简单的基本应用程序。请找到我的Plunker。
我的指令中的 <h2> {{ctrl1.item }}</h2>
和 {{$scope.subItem}}
都没有给出预期的输出。任何人都可以帮助我修复 plunker 以输出项目和子项目。也可以为我提供一些很好的参考资料,以使用 1.3 和示例教程等熟悉这种新语法
在你的 plunker 中删除 $curDir
下次尝试使用 chrome 中的控制台或其他方式。出现错误:
Error: [$injector:unpr] Unknown provider: $curDirProvider <- $curDir <- mainCtrl
http://plnkr.co/edit/NrThd1?p=preview
作为旁注:如果您在 HTML 中看到绑定表达式 {{ }}
,那么通常 AngularJS 在控制台输出中出现错误。
你的指令有问题:
一)
function postLink($scope, $element, $attrs) {
// This is not valid JavaScript
template : '<p> I am from New Directive with Item {{$scope.subItem}}</p>';
}
b) 没有 javascript 将该模板附加到元素。所以在它出现之前你什么都看不到:
$element.append(template);
-- 或--
$element.append(angular.element(template));
c) 一起使用指令的 controller
和 link
对象是没有意义的 - 使用一个或另一个是一个很好的起点。
d) 如果您使用 controller
,则在指令主体内使用绑定表达式 {{ }}
来正常显示数据。另请注意,如果您将控制器用作,请确保这是在您的指令控制器对象中:
function curDirective() {
return {
restrict: 'E',
controller: 'mainCtrl as vm' // <-- see here
};
}
固定: