переплетены сфера не изменится правильно

Question

У меня есть директива композит ввода и выберите теги весь исходный код доступен в plunker

Я новичок в angularJS и это моя первая директива после чтения некоторые учебники. , когда я меняю опции выбора Связанный объект item1 не меняется правильно !!!! Я ожидаю, что item1 должен обновляться с выбранным элементом в selectedchanged функции

Благодаря какой-либо помощи или улучшить

шаблон директива codecombo:

<span> 
    <input ng-model="code" ng-change="codechanged()"> 
    <select ng-model="selecteditem" ng-change="selectchanged()" ng-options="item as item[propertytitle] for item in list" class="codecombo-select"></select> 
</span> 

codecombo сценарий:

app.directive('codecombo', function($compile) { 
    return { 
restrict:'A', 
      scope:{ 
       propertyid:'@', 
       propertycode:'@', 
       propertytitle:'@', 
       list:'=' , 
       selecteditem:'=', 
       selectedchanged:'&' 
      }, 
      templateUrl:'template.html', 
      link: 
      { 
       pre: function (scope, element, attrs, controller) { 
        /*make some property optional*/ 
        if(!attrs.propertytitle) attrs.propertytitle="title"; 
        if(!attrs.propertyid) attrs.propertyid="id"; 
        if(!attrs.propertycode) attrs.propertycode="code"; 
       }, 
       post: function (scope, element, attrs, controller) { 
        var select=element.find('select'); 
        var input=element.find('input'); 


        /*some code delete for save space ...*/ 

        scope.code; 

        /*select option changed*/ 
        scope.selectchanged=function(){ 
         console.log('select-changed'); 
         console.log(scope.selecteditem); 
         if(scope.selecteditem!==null){ 
          fillSelectedProperties(scope.selecteditem); 
         } 
         else 
          emptySelectedProperties(); 

         scope.selectedchanged(); 
        } 

        /*input text changed*/ 
        scope.codechanged=function(){ 
         console.log('code-changed'); 
         scope.selecteditem=findByCode(scope.list,scope.code); 
         console.log(scope.selecteditem); 
         scope.selectchanged(); 
        } 
       } 
      } 
     } 

}); 

использование codecombo в index.html:

<div codecombo list="testlist" selecteditem="item1" selectedchanged="selectedchanged()"></div> 

Это контроллер:

app.controller('MainCtrl', function($scope) { 

    $scope.testlist=[ 
    {id:1,code:100,title:'Item no.100'}, 
    {id:2,code:200,title:'Item no.200'}, 
    {id:3,code:300,title:'Item no.300'}, 
    {id:4,code:400,title:'Item no.400'} 
    ]; 

    $scope.selectedchanged=function(){ 
    /* 
    i want do some staff with item1 here and expect to be updated for each selectedchanged 
    but seem it has previous value 
    */ 

    console.log($scope.item1); 
    $scope.title=$scope.item1.title; 
    } 
}); 

Answer 1

По некоторым причинам изменения слушатель (ng-change) выстреливает перед обновлением поля внешнего объема. Синхронизация области реализована с помощью переменной $watch переменной во внутренней области, которая обновляет переменную во внешнем.

Сказав это, я предлагаю удалить атрибут selectedchanged и реализовать его как часы в родительском контроллере. Я думаю, что он достигает тот же результат, с немного меньшим количеством коды:

$scope.$watch("item1", function(newval) { 
    console.log($scope.item1); 
    $scope.title = $scope.item1 != null ? $scope.item1.title : "-"; 
}); 

(Кстати не отметить чек null/undefined.)

Раздвоенных звенеть: http://plnkr.co/edit/3Ur9N9fEduXQU2xehFC8?p=preview