Question

尝试通过在表单模型的$ watch期间更新的模型来更新angular指令的绑定。虽然模型的值在表单的监视器中的控制器作用域中更新，但它不会在指令渲染中更新。我可能会出错的任何想法？

<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
  <body>
<div ng-controller="ctrl">
<test-directive  my-string="myString"></test-directive>
<form name="myForm" ng-controller="ctrl" >
  userType: <input name="input" ng-model="userType">

</form>

<input type="text" name="input" ng-model="myModel" required />
{{testString}}
</div>


  </body>
</html>

这是Angular设置。

var app = angular.module('App', []);

app.directive('testDirective', function ($parse) {
    return{
      restrict: 'E',
    scope:{myString:"=myString"},
      link: function(scope,element,attributes){ 
      var test=[];

      },
      template:' Updated::{{myString}}',

    }
});

app.controller('ctrl',['$scope','$timeout',function($scope,$timeout) {

 $scope.myString='12345';


$scope.$watch('myForm', function(myForm,oldvalue) {
  debugger;
    if(myForm) { 


       $scope.myString='new String';




    }
    else {
        console.log('Form is Undefined');
    }  
});

$scope.$watch('myModel',function(newValue,oldValue){
  console.log(newValue);
});


}]);

基本上，当我的表单被加载并可通过控制器访问时，我需要更改指令中的一些数据。

Answer 1

您将在嵌套的不同DOM元素上对控制器进行两次实例化。

<!-- Creates a new scope -->
<div ng-controller="ctrl">

<!-- Is pointing to the parent scope -->
<test-directive  my-string="myString"></test-directive>

<!-- Creates a a new nested scope -->
<form name="myForm" ng-controller="ctrl" >
  userType: <input name="input" ng-model="userType">

</form>

这意味着子范围将获得它自己的属性myString，这是$watch被触发时更新的属性。

然而，您的自定义指令指向父属性，因此不会反映更改。

从表格观察更新时更新Angular Directive模型的值时发出问题

1 个答案: