属性上的双向绑定angularjs

Question

属性值没有在双向绑定属性上更新。我需要关注属性吗？ 我创建了一个简单的双向绑定。如果在渲染指令后更改minValue，它不会更新新的minValue。

angular.app('revMgmtApp', []); 
angular.module('revMgmtApp').controller('testCtrl', testCtrl); 

function testCtrl() { 
    var vm = this; 
    vm.counter = 1; 
    vm.minValue = 10; 
}; 



angular.module('revMgmtApp').directive('testDir', function ($compile) { 

    var calController = function() { 
     var vm = this; 
     vm.localOpen = function ($event) { 
      $event.preventDefault(); 
      $event.stopPropagation(); 
      vm.opened = true; 
     } 
    } 

    return { 
     restrict: 'EA', 
     scope: { 
      ngModel: '=', 
      minValue: '=', 
     }, 
     replace: true, 
     link: function (scope, elem, attrs, modelCtrl) { 
      debugger; 
      var el = '<div><span>'; 
      el += '<input type="number" ng-model="vm.ngModel" '; 

      if (scope.vm.minValue != null) { 
       el += " min='" + scope.vm.minValue + "' "; 
      } 
      el += "/>"; 
      var el1 = $compile(el)(scope); 
      elem.replaceWith(el1); 

     }, 
     controller: calController, 
     bindToController: true, 
     controllerAs: 'vm', 
    } 

}) 

    <div ng-app="revMgmtApp" ng-controller="testCtrl as ctrl"> 
    <p> 
     Enter min counter <input type="number" ng-model="ctrl.minValue" /> 
    </p> 

    <test-dir ng-model="ctrl.counter" min-value="ctrl.minValue"></test-dir> 
</div> 

Answer 1

在回答你的问题。是的，您需要关注属性和更新值的功能。

scope.$watch(attrs.testDir, function(value) { 
    //set value here 
    //call update value here 
    }); 

我会按照这个例子中plunker，或在这里下"Creating a Directive that Manipulates the DOM"

但是，你可能会使其成为一个更复杂一点，那么你需要。它是一个独立的范围，所以我们将添加我们想要访问的范围变量作为html中的属性。

为清楚起见，我会在指令HTML重命名属性：

<test-dir mymodel="ctrl.counter" mymin="ctrl.minValue"></test-dir> 

然后，在适用范围，定义保存您将使用范围变量的属性。

scope: { 
     mymodel: '=mymodel', 
     myminval: '=mymin', 
    }, 

。然后，而不是 “链接：” 使用模板。

template: '<div><span><input ng-model="mymodel" min="myminval"/></span></div>'; 

这样，你只结合到您所关心的值。