栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

编辑 :这个答案是旧的,可​​能已经过时。只需抬起头,这样就不会使人们误入歧途。我不再使用Angular,因此无法进行改进。


这实际上是相当不错的逻辑,但是您可以稍微简化一下。

指示

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 >' +      '<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元素与范围中的值链接。由于您自己创建指令,因此要创建“新” html元素,因此不需要ng-model。

编辑 正如Mark在评论中提到的那样,没有理由您 不能 使用ng-model,只是为了遵守约定。

  • 通过在指令中显式创建一个作用域(“隔离”作用域),该指令的作用域无法访问父作用域上的“ name”变量(这就是我想使用ng-model的原因)。
  • 我从指令中删除了ngModel,并将其替换为可以更改为任何名称的自定义名称。
  • 使一切仍然起作用的是在范围内使用’=’。在“ scope”标题下签出docs docs。

通常,如果您希望指令中的值始终映射到父级作用域中的值,则您的指令应使用隔离的作用域(正确执行)并使用’=’类型作用域。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/448291.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号