$元素類型指令

$ ViewValue沒有被使用我創建了這個使用格式化程序的簡單指令，當指令被用作元素或者它是div的屬性時，它不會更新輸入。

JSBIN： http://jsbin.com/rifaxuvihu/edit?html,js,output

angular.module('myApp', []) 

    .controller('myCtrl', function($scope) { 

    $scope.foo = '123'; 
    console.log('------ MODEL CHANGED ($scope.foo = "123") ------'); 

    $scope.changeModel = function() { 
    $scope.foo = 'abc'; 
    console.log('------ MODEL CHANGED ($scope.foo = "abc") ------'); 
    }; 

}) 

.directive('myDirective', function() { 
    return { 
       restrict: 'AE', 
       transclude: true, 
       require: 'ngModel', 
       template: function($element, $attrs, $ctrls) { 
        var inp, lbl = 'label'; 

        if ($attrs.type == 'html'){ 
         inp = [ 
          '<summernote class="form-control" ng-model="ngModel" ', 
          ' name="{{name}}" placeholder={{placeholder}} height="{{height}}"></summernote>' 
         ]; 
         lbl = 'div'; 
        } else 
         inp = [ 
          '<input class="form-control" ng-model="ngModel" ', 
          ' type="{{type}}" />' 
         ]; 

        var ret = [ 
         '<div class="advform-input form-group inp-{{type}} {{cols}}">', 
         ' <' + lbl + ' class="advform-lbl">', 
         inp.join('\n'), 
         '  <div class="helper" ng-if="type != \'html\'">{{ placeholder }}</div>', 
         '  <div class="desc">{{ desc }}</div>', 
         ' </' + lbl + '>', 
         '</div>' 
        ].join('\n'); 

        return ret; 
       }, 
       scope: { 
        placeholder: '@', 
        ngModel: '=?', 
        type: '@', 
        name: '@', 
        height: '@' 
       }, 
       link: function ($scope, $element, $attrs, $ngModel) { 
        console.log('ooi'); 
        if (true){ 

         $ngModel.$formatters.unshift(function(modelVal) { 
          console.log('-- Formatter --', JSON.stringify({ 
           modelVal:modelVal, 
           ngModel: { 
           viewVal: $ngModel.$viewValue, 
           modelVal: $ngModel.$modelValue 
           } 
          }, null, 2)); 
          return 1 + '-) ' +modelVal; 
          }); 

          // same as $watch('foo') 
          $scope.$watch(function() { 
          return $ngModel.$viewValue; 
          }, function(newVal) { 
          console.log('-- $watch "foo" --', JSON.stringify({ 
           newVal:newVal, 
           ngModel: { 
           viewVal: $ngModel.$viewValue, 
           modelVal: $ngModel.$modelValue 
           } 
          }, null, 2)); 
          }); 
        } 
       } 
    }; 
}) 

;

的HTML：

<!DOCTYPE html> 

<html ng-app="myApp" ng-controller="myCtrl"> 

<head> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script> 

</head> 

<body> 
<form name="form"> 
    <my-directive type="text" name="foo" ng-model="foo"></my-directive> 
    <input my-directive type="text" name="foo" ng-model="foo" /> 
    <div my-directive type="text" name="foo" ng-model="foo"></div> 
</form> 
<button ng-click="changeModel()">Change Model</button> 
    <p>$scope.foo = {{foo}}</p> 
    <p>Valid: {{!form.foo.$error.test}}</p> 
</body> 

</html>

來源

2015-12-29 Jonathan

的問題是，該指令創建一個新的範圍和指令的ngModel的viewValue是創建一個不同在模板內。
要修復它，可以將模板的ng模型更改爲$ parent.ngModel。
所以格式將按預期工作。

來源

2016-01-06 01:53:15 Jonathan

$元素類型指令

回答

相關問題