ng-controller变量Vs ng-init vairable

时间:2016-01-11 09:22:48

标签: javascript angularjs ng-controller ng-init

对于以下代码,使用angularJS,

<script type="text/javascript">
    angular.module('app').controller('add', ['$scope',function($scope) {
           $scope.name = "Bonita Ln";
    }]);
</script>

用于访问$scope变量成员name的相应Javascript代码是,

<div ng-app="app" ng-controller="add">
   <script type="text/javascript">
       var dom_el = document.querySelector('[ng-controller="add"]');
       var ng_el = angular.element(dom_el);
       var ng_el_scope = ng_el.scope();
       var name = ng_el_scope.name;
   </script>
</div>

下面是角度代码,使用角度表达式

访问ng-init变量name
<body ng-app="">
    <div ng-init="name='Bonita Ln'">
        {{name}}
    </div>
</body>

如何使用JavaScript访问ng-init变量name

2 个答案:

答案 0 :(得分:0)

您可以通过访问控制器中的变量$scope.name来执行此操作,但必须在您的范围内进行定义。

<div ng-init="name='Bonita Ln'">
  {{name}}
<div ng-controller="MyCtrl">
  Hello, {{name2}}!
  </div>
</div>


angular.module('myApp',[]).controller('MyCtrl',function($scope) {
    $scope.name2 = $scope.name;
})

这是有效的,因为您已在父级范围内将名称定义为控制器,并且正在继承

但如果对于相同的控制器,html模板将如下所示:

<div ng-controller="MyCtrl">
<div ng-init="name='Bonita Ln'">
  {{name}}
Hello, {{name2}}!
  </div>
</div>

然后它将无效,因为在调用控制器函数时未定义变量

答案 1 :(得分:0)

你可以用完全相同的方式使用它,但你不应该这样做。

我已经低估了你的问题,因为这真的是非常糟糕的做法,我的意思是你所提供的每一行代码都是不好的做法。

我努力想要找出你想做的事情,所以我无法真正为你提供更好的代码,但我可以为你提供一些必须的链接在继续您现在正在编码的任何内容之前退房。

  • Shaping up with Angular是一个由有角度的团队提供的免费代码课程,它是一个非常好的课程,可以让你更多地了解如何使用角度,而不是角度网站上的电话教程。
  • Papa Johns Angular styleguide关于如何编写可维护代码的精彩指南。
  • thinkster.io学习掌握Angular的分步指南
  • egghead.io一系列精彩的视频教程

我知道我的评论听起来很苛刻,但是如果你写了更多标准化的Angular,你将会感谢你,并保留一个明确的样式指南。
还要记住,在角度方面,您的代码不应该知道DOM,您不需要为DOM元素指定eventListeners,只需使用ng-click之类的相应指令。 (是的,我知道规则可能存在例外情况)