Question

这是我的代码：

<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。有什么解释吗？

Answer 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事件后的$摘要周期。

Answer 2

你好，你试过toset $ scope。$ apply（）？ ..因为如果你想触发一个外部角度事件，你需要它..像：

<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>

隔离范围的属性不会影响其父

2 个答案: