AngularJS - 创建使用ng-model的指令

8 回答

• 29

  从Angular 1.5开始，可以使用组件 . 组件是即将推出的方式，可以轻松解决这个问题 .

  <myComponent data-ng-model="$ctrl.result"></myComponent>
  
  app.component("myComponent", {
      templateUrl: "yourTemplate.html",
      controller: YourController,
      bindings: {
          ngModel: "="
      }
  });
  

  在YourController中你需要做的就是：

  this.ngModel = "x"; //$scope.$apply("$ctrl.ngModel"); if needed
  

  回复于 2024-04-24T14:26:47+08:00
• 66

  当您需要访问模型的$ viewValue或$ modelValue时，您只需要ng-model . 见NgModelController . 在这种情况下，你会使用 require: '^ngModel' .

  其余的，请参阅Roys answer .

  回复于 2024-04-24T14:26:47+08:00
• 0

  我对所有答案进行了组合，现在有两种方法可以使用ng-model属性：

  • 使用复制ngModel的新范围

  • 与链接上编译的范围相同

  var app = angular.module('model', []);
  
  app.controller('MainCtrl', function($scope) {
    $scope.name = "Felipe";
    $scope.label = "The Label";
  });
  
  app.directive('myDirectiveWithScope', function() {
    return {
      restrict: 'E',
      scope: {
        ngModel: '=',
      },
      // Notice how label isn't copied
      template: '<div class="some"><label>{{label}}: <input ng-model="ngModel"></label></div>',
      replace: true
    };
  });
  app.directive('myDirectiveWithChildScope', function($compile) {
    return {
      restrict: 'E',
      scope: true,
      // Notice how label is visible in the scope
      template: '<div class="some"><label>{{label}}: <input></label></div>',
      replace: true,
      link: function ($scope, element) {
        // element will be the div which gets the ng-model on the original directive
        var model = element.attr('ng-model');
        $('input',element).attr('ng-model', model);
        return $compile(element)($scope);
      }
    };
  });
  app.directive('myDirectiveWithoutScope', function($compile) {
    return {
      restrict: 'E',
      template: '<div class="some"><label>{{$parent.label}}: <input></label></div>',
      replace: true,
      link: function ($scope, element) {
        // element will be the div which gets the ng-model on the original directive
        var model = element.attr('ng-model');
        return $compile($('input',element).attr('ng-model', model))($scope);
      }
    };
  });
  app.directive('myReplacedDirectiveIsolate', function($compile) {
    return {
      restrict: 'E',
      scope: {},
      template: '<input class="some">',
      replace: true
    };
  });
  app.directive('myReplacedDirectiveChild', function($compile) {
    return {
      restrict: 'E',
      scope: true,
      template: '<input class="some">',
      replace: true
    };
  });
  app.directive('myReplacedDirective', function($compile) {
    return {
      restrict: 'E',
      template: '<input class="some">',
      replace: true
    };
  });
  

  .some {
    border: 1px solid #cacaca;
    padding: 10px;
  }
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
  <div ng-app="model" ng-controller="MainCtrl">
    This scope value <input ng-model="name">, label: "{{label}}"
    <ul>
      <li>With new isolate scope (label from parent):
        <my-directive-with-scope ng-model="name"></my-directive-with-scope>
      </li>
      <li>With new child scope:
        <my-directive-with-child-scope ng-model="name"></my-directive-with-child-scope>
      </li>
      <li>Same scope:
        <my-directive-without-scope ng-model="name"></my-directive-without-scope>
      </li>
      <li>Replaced element, isolate scope:
        <my-replaced-directive-isolate ng-model="name"></my-replaced-directive-isolate>
      </li>
      <li>Replaced element, child scope:
        <my-replaced-directive-child ng-model="name"></my-replaced-directive-child>
      </li>
      <li>Replaced element, same scope:
        <my-replaced-directive ng-model="name"></my-replaced-directive>
      </li>
    </ul>
    <p>Try typing in the child scope ones, they copy the value into the child scope which breaks the link with the parent scope.
    <p>Also notice how removing jQuery makes it so only the new-isolate-scope version works.
    <p>Finally, note that the replace+isolate scope only works in AngularJS >=1.2.0
  </div>
  

  我不确定我喜欢链接时的编译 . 但是，如果您只是将元素替换为另一个元素，则不需要这样做 .

  总而言之，我更喜欢第一个 . 只需将范围设置为 {ngModel:"="} ，并在模板中将 ng-model="ngModel" 设置为您想要的位置 .

  Update ：我内联了代码段并为Angular v1.2更新了它 . 事实证明，隔离范围仍然是最好的，特别是在不使用jQuery时 . 所以归结为：

  • 您是否正在替换单个元素：只需替换它，保留范围，但请注意，对于v2.0，不推荐使用replace：

  app.directive('myReplacedDirective', function($compile) {
    return {
      restrict: 'E',
      template: '<input class="some">',
      replace: true
    };
  });
  

  • 否则使用此：

  app.directive('myDirectiveWithScope', function() {
    return {
      restrict: 'E',
      scope: {
        ngModel: '=',
      },
      template: '<div class="some"><input ng-model="ngModel"></div>'
    };
  });
  

  回复于 2024-04-24T14:26:47+08:00
• 0

  它实际上是非常好的逻辑，但你可以简化一些事情 .

  指令

  var app = angular.module('plunker', []);
  
  app.controller('MainCtrl', function($scope) {
    $scope.model = { name: 'World' };
    $scope.name = "Felipe";
  });
  
  app.directive('myDirective', function($compile) {
    return {
      restrict: 'AE', //attribute or element
      scope: {
        myDirectiveVar: '=',
       //bindAttr: '='
      },
      template: '<div class="some">' +
        '<input ng-model="myDirectiveVar"></div>',
      replace: true,
      //require: 'ngModel',
      link: function($scope, elem, attr, ctrl) {
        console.debug($scope);
        //var textField = $('input', elem).attr('ng-model', 'myDirectiveVar');
        // $compile(textField)($scope.$parent);
      }
    };
  });
  

  带指令的Html

  <body ng-controller="MainCtrl">
    This scope value <input ng-model="name">
    <my-directive my-directive-var="name"></my-directive>
  </body>
  

  CSS

  .some {
    border: 1px solid #cacaca;
    padding: 10px;
  }
  

  您可以使用此Plunker查看它的运行情况 .

  这是我看到的：

  • 我明白你为什么要使用'ng-model'，但在你的情况下没有必要 . ng-model用于链接现有html元素和范围中的值 . 由于您're creating a directive yourself you'正在创建'new' html元素，因此您不需要ng-model .

  EDIT 正如Mark在他的评论中提到的那样，没有理由不能使用ng-model，只是为了遵守惯例 .

  • 通过在指令中显式创建范围（'isolated'范围），父范围上的指令's scope cannot access the ' name'变量（这就是为什么，我想，你想使用ng-model） .

  • 我从您的指令中删除了ngModel，并将其替换为您可以更改为任何内容的自定义名称 .

  • 使这一切仍然有效的是'='在范围内签名 . 查看'scope' Headers 下的文档docs .

  通常，如果希望指令中的值始终映射到父作用域中的值，则指令应使用隔离作用域（您已正确执行）并使用'='类型作用域 .

  回复于 2024-04-24T14:26:47+08:00
• 50

  我不会通过属性设置ngmodel，您可以在模板中正确指定：

  template: '<div class="some"><label>{{label}}</label><input data-ng-model="ngModel"></div>',
  

  plunker ：http://plnkr.co/edit/9vtmnw?p=preview

  回复于 2024-04-24T14:26:47+08:00
• 206

  它不是那么复杂：在你的dirctive中，使用别名： scope:{alias:'=ngModel'}

  .directive('dateselect', function () {
  return {
      restrict: 'E',
      transclude: true,
      scope:{
          bindModel:'=ngModel'
      },
      template:'<input ng-model="bindModel"/>'
  }
  

  在您的HTML中，正常使用

  <dateselect ng-model="birthday"></dateselect>
  

  回复于 2024-04-24T14:26:47+08:00
• 15

  创建隔离范围是不可取的 . 我会避免使用scope属性并执行类似的操作 . scope：true为您提供一个新的子范围，但不是隔离 . 然后使用parse将本地范围变量指向用户提供给ngModel属性的同一对象 .

  app.directive('myDir', ['$parse', function ($parse) {
      return {
          restrict: 'EA',
          scope: true,
          link: function (scope, elem, attrs) {
              if(!attrs.ngModel) {return;}
              var model = $parse(attrs.ngModel);
              scope.model = model(scope);
          }
      };
  }]);
  

  回复于 2024-04-24T14:26:47+08:00
• 2

  这是一个迟到的答案，但我发现这很棒post关于 NgModelController ，我认为这正是你在寻找的地方 .

  TL;DR - 您可以使用 require: 'ngModel' 然后将 NgModelController 添加到您的链接功能：

  link: function(scope, iElement, iAttrs, ngModelCtrl) {
    //TODO
  }
  

  这样，不需要黑客 - 你正在使用Angular的内置 ng-model

  回复于 2024-04-24T14:26:47+08:00