2017-01-18 6 views
0

Вот мой код:изолированном осциллографа не влияет на его родителей

<html ng-app="myApp"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 

<body> 
    <div ng-controller="myController"> 
    <input type="text" class="form-control" name="value" restrictions error-message=errorMessage /> 
    <span style="color:red;margin-left:50px">{{errorMessage}}</span> 
    </div> 
<script> 
    angular.module('myApp',[]) 
    .controller('myController', function ($scope){ 
     $scope.errorMessage="Football game"; 
    }) 
    .directive('restrictions', function() { 
      return { 
       scope: { 
        errorMessage:'=' 
       },  
       link:function(scope,element){ 

        element.on('click', function(event) { 
         event.preventDefault(); 
         console.log(scope.errorMessage); // Football game     
         scope.errorMessage="Invalid characters";      
         console.log(scope.errorMessage); //Invalid characters     
        }); 
       } 
      } 
    }); 

</script> 

</body> 
</html> 

Это то, что я не могу объяснить, почему {{errorMessage}}не меняется на «недопустимые символы» и по-прежнему показывает «Футбольный матч». Я думаю, что scope.errorMessage совпадает с $ scope.errorMessage из-за errorMessage:'='. Кроме того, я знаю эту область. $ Parent === $ scope. Любое объяснение?

+0

Как вы говорите, у вас есть изолированный объект '$ scope'. Он наследует от родителя, поэтому изменения от родителя будут отражаться в дочернем элементе, но не наоборот – devqon

+0

Однако errorMessage должен влиять на родителя из-за '=' –

+0

Да, извините, я пропустил этот. Я думаю, что вы должны запускать '$ digest' из углового вручную, потому что' on ('click' .. 'происходит вне его:' scope. $ Apply (function() {scope.errorMessage = ..}); ' – devqon

ответ

0

Привет, вы пытались установить $ scope. $ Apply()? ..cause если вы хотите, чтобы вызвать внешнее угловое событие вам нужно это ..somthing нравится:

<html ng-app="myApp"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 

<body> 
    <div ng-controller="myController"> 
    <input type="text" class="form-control" name="value" restrictions error-message=errorMessage /> 
    <span style="color:red;margin-left:50px">{{errorMessage}}</span> 
    </div> 
<script> 
    angular.module('myApp',[]) 
    .controller('myController', function ($scope){ 
     $scope.errorMessage="Football game"; 
    }) 
    .directive('restrictions', function() { 
      return { 
       scope: { 
        errorMessage:'=' 
       },  
       link:function(scope,element){ 



         element.on('click', function(event) { 
          event.preventDefault(); 
          console.log(scope.errorMessage); // Football game     $scope.$apply(function(){ 
          scope.errorMessage="Invalid characters";      
          console.log(scope.errorMessage); //Invalid characters     
         }); 
}); 
       } 
      } 
    }); 

</script> 

</body> 
</html> 
1

Изменение функции связи для:

link: function(scope, element) { 

    element.on('click', function(event) { 
     event.preventDefault(); 
     console.log(scope.errorMessage); // Football game     
     scope.errorMessage = "Invalid characters"; 
     scope.$apply(); 
     console.log(scope.errorMessage); //Invalid characters     
    }); 
} 

Примечания scope.$apply() что заставляет $ переваривать цикл после того, как click события.

+0

Я уже пробовал это и не работал. Однако я поместил 'scope. $ apply()' в конце функции. Поместив ее в позицию, которую вы предлагаете, она работает !!! В том, что сумасшедший или у него есть какие-то объяснения? –

 Смежные вопросы

  • Нет связанных вопросов^_^