2015-11-12 56 views
0

我是Angular的新手。请考虑下面的一段代码。什么时候在AngularJS中创建一个范围变量?

 <form name="newEventForm"> 
      <fieldset> 
       <label for="eventName">Event Name:</label> 
       <input id="eventName" required ng-model="event.name" type="text" placeholder="Name of your event..."> 


      <button ng-click="saveEvent(event, newEventForm)" type="submit" class="btn btn-primary">Save</button> 
      <button ng-click="cancelEdit()" type="button" class="btn btn-default">Cancel</button> 
     </form> 

我的问题是 - 为什么我们需要将事件参数传递给saveEvent函数?不使用ng-model通过Angular方的双向绑定自动生成一个event.name变量?例如

<form name="newEventForm"> 
       <fieldset> 
        <label for="eventName">Event Name:</label> 
        <input id="eventName" required ng-model="event.name" type="text" placeholder="Name of your event..."> 


       <button ng-click="saveEvent(newEventForm)" type="submit" class="btn btn-primary">Save</button> 
       <button ng-click="cancelEdit()" type="button" class="btn btn-default">Cancel</button> 
      </form> 

在此代码的第二个版本中,我没有明确地注入事件作为函数参数。但是,按提交时,这是saveEvent的代码

$scope.saveEvent = function(newEventForm) 
    { 
     alert(1); 
     alert(newEventForm.$valid); 
     if(newEventForm.$valid) 
     { 
      window.alert('event ' + event.name + ' saved!'); 
     } 
    } 

并且事件未定义。它不应该被定义吗?道歉,如果这个问题是一个新手的问​​题。试图通过ng-model来了解如何创建范围项目,以及双向绑定是如何工作的。谢谢 !

UPDATE

卫生署,我应该使用$ scope.event。然后它工作。谢谢,就像我说的 - 这是新的,它只在我问了这个问题后才想到:)

+0

不要使用事件作为全局对象,而是作为$ scope对象,而不是(在你的控制器中):'$ scope.event.name' – devqon

+0

yes!哈哈,我只是想出了自己。许多很多谢谢:) –

回答

1

视图在关联的作用域下创建事件变量,使用$ scope.event.name。 祝你好运

0

其实所有在html中指定的变量或模型都是scope变量。

<div ng-controller="myController" ng-init="name='Hello World'"> 
    {{name}} 
    <button ng-click="myFn(name)"> Click Me </button> 
</div> 

在本例中,我已开始了一个名为name变量。它实际上是一个范围变量。这段代码其实很像

myApp.controller("myController", function($scope){ 
    $scope.name = "Hello World"; 

    $scope.myFn = function(param){ 
     // here you can see that your variable name passed from html is same as your scope variable 
     if(param == $scope.name){ 
      alert("Yes, two are equal !!!"); 
     } 
    } 
}); 

这两个是一样的。您可以使用html或js。