2015-06-11 3 views
1

Я хочу связать полное имя = имя + фамилия.Как называется контроллер в угловом?

Я видел этот пример в школах w3. Но я не могу это понять.

Вопрос в том, как вызвана функция? У него есть слушатели?

Не могли бы вы пролить свет на него подробно. К сожалению я новичок ..

Мой код:

var application = angular.module('myTempApp', []); 
 
     application.controller('myController', function ($scope) { 
 
      $scope.myFirstName = "xxx"; 
 
      $scope.myLastName = "yyy"; 
 
      $scope.myFunction = function() { 
 
       alert('called'); 
 
       $scope.myFullName = $scope.myFirstName + $scope.myLastName; 
 
      } 
 
     });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body> 
 
    <div ng-app="myTempApp" ng-controller="myController"> 
 
     <input type="text" ng-model="myFirstName" /> 
 
     <input type="text" ng-model="myLastName" /> 
 
     <input type="text" ng-model="myFullName" ng-bind="myFullName" /> 
 
     <br /> 
 
     {{ myFunction() }} 
 
     <br/> 
 
     data ::: {{2+2}} 
 
    </div> 
 
</body>

Спасибо заранее.

+1

довольно углов главной информативная. w3 школа с другой стороны .. хорошо. Возможно, это поможет: https://docs.angularjs.org/guide/databinding – nilsK

+0

Прочтите это: https://docs.angularjs.org/guide/scope – rmuller

+0

вам действительно нужно прочитать этот https: //docs.angularjs. org/guide/controller –

ответ

2

let шаг за шагом.

Вы связываете три литерала и одну переменную типа функции. Всякий раз, когда вы пишете какую-либо переменную (любого типа данных), она регистрируется в цикле дайджеста angularJS. Имя irstName, lastName, fullName и myFunction регистрируются в цикле дайджеста. И каждая переменная в цикле дайджеста имеет наблюдателя.

Всякий раз, когда переменная изменяется, angularJS проверяет все переменные, зарегистрированные в цикле дайджеста, и печатает последнее значение каждой переменной в представлении.

так что давайте предположим - если firstName является xxx, а фамилия - yyy, и вы изменили firstName на xx. Теперь угловое будет проверять как firstName, так и lastName и печатать последние значения обоих из них.

Таким образом, всякий раз, когда вы делаете какие-либо изменения в любую области видимости переменного, ваша переплетены функции внутри углового выражения вызывается страница

+0

Это объяснялось больше, чего я хочу. Спасибо за информацию дайджеста. – NANDAKUMAR

0

Если вы хотите обновить переменную в зависимости от другого можно использовать $watch

var application = angular.module('myTempApp', []); 
 
application.controller('myController', function ($scope) { 
 
    $scope.myFirstName = "xxx"; 
 
    $scope.myLastName = "yyy"; 
 
    
 
    $scope.myFunction = function() { 
 
    //alert('called'); 
 
    $scope.myFullName = $scope.myFirstName + $scope.myLastName; 
 
    }; 
 
    
 
    $scope.$watch("myFirstName + myLastName", $scope.myFunction); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body> 
 
    <div ng-app="myTempApp" ng-controller="myController"> 
 
     <input type="text" ng-model="myFirstName" /> 
 
     <input type="text" ng-model="myLastName" /> 
 
     <input type="text" ng-model="myFullName" ng-bind="myFullName" /> 
 
     <br /> 
 
     {{ myFunction() }} 
 
     <br/> 
 
     data ::: {{2+2}} 
 
    </div> 
 
</body>

0

Это может помочь.

function studentController($scope) { 
    $scope.student = { 
     firstName: "Mahesh", 
     lastName: "Parashar", 
     fullName: function() { 
      var studentObject; 
      studentObject = $scope.student; 
      return studentObject.firstName + " " + studentObject.lastName; 
     } 
    }; 
} 

Enter first name: <input type="text" ng-model="student.firstName"><br> 
Enter last name: <input type="text" ng-model="student.lastName"><br> 
<br> 
You are entering: {{student.fullName()}} 
+0

вам не нужно вызывать функцию, чтобы получить полное имя. angularjs обеспечивают динамическое связывание , когда вы меняете его на контроллер, он автоматически отражает html. –

0

Там два способа связывания данных между моделью (HTML и контроллером данных в $ объеме, нг-затруднительное и {{}}. То, что они делают здесь вызов {{туРипсЫоп()}} ((которые действуют как слушатель), то каждый раз мы заботимся о myFirstName и myLastName (так как они меняются, новое значение будет сохранено в $ scope.myfullName и рендеринг в модели)