草庐IT

javascript - 在 AngularJS 指令上需要 :ngModel vs. 范围:{ ngModel: '=' }

coder 2025-03-14 原文

嗨，哪个更好？有什么区别？有什么优点和缺点？

这是两者的对比代码:

范围:{ ngModel:'=' }

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="app">

<input ng-model="code"></my-directive>

</div>
 <script type="text/javascript">
  app = angular.module('app', []);

  app.directive('input', function(){
   return {
    scope: {
     ngModel: '='
    },
    link: function(scope, element, attrs){
     scope.$watch('ngModel', function(value){
      console.log(value);
     })
    }
   }
  });
 </script>
</body>
</html>

要求:'ngModel'，

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="app">

<input ng-model="code"></my-directive>

</div>
 <script type="text/javascript">
  app = angular.module('app', []);

  app.directive('input', function(){
   return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel){
      attrs.$observe('ngModel', function(value){
        scope.$watch(value, function(newValue){
          console.log(newValue);
        });
      });
    }
   }
  });
 </script>
</body>
</html>

附言 请注意，这两个代码的作用相同。 使用模型的值登录控制台

最佳答案

使用 scope:{ngModel:'='} ,

它创建一个带有 isolate scope 的指令，这里基本上范围是隔离的，它不从父 $scope 继承，但是值被传递到该指令所需的指令中。如果您使用“=”，那么它是双向数据绑定(bind)。

优点和缺点取决于您的要求。

优点:

  • 无需每次都使用 $scope.$watch 来更新指令中的 View 如果父作用域变量的值发生变化。 '=' 完成工作。
  • 如果指令与隔离范围一起使用，它将充当可重用组件，可以在您的应用程序的多个地方使用。
  • 传递给独立作用域的作用域变量可以直接在您的指令 Controller 中使用，即使您的指令中不存在链接函数。

缺点:

  • 由于范围是隔离的，不会获得父 Controller 的整个范围变量/函数。只需要通过指令定义传递
  • 无法使用 ng-model 或 ng-form 的 Angular 内置方法来创建 api，ngFormController , ngModelController

使用 require:'ngModel'

优点:

  • 在嵌套指令中使用时易于访问整个 parentsController 范围/函数
  • 很适合创建插件，因为它有助于模块化并且具有父子关系
  • 能够使用 ng-model 或 ng-form 的 Angular 内置方法从中创建 api
  • 适用于事件发送和广播(发布-订阅设计模式)。

缺点

  • 应该有链接函数，以便获取父 Controller 及其作用域变量和方法。
  • 需要使用 $scope.$watch 来在父级作用域变量发生变化时更新 View 。
  • 当使用 controller As 语法时。需要有 $scope 内置方法，如 $scope.$watch 和 $scope.$on $scope.$emit ，因为它会干扰指令 Controller 或链接使用 this 和 $scope

关于javascript - 在 AngularJS 指令上需要 :ngModel vs. 范围:{ ngModel: '=' }，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37613598/

ngModeljavascriptstrongcodescopeangularjs

有关javascript - 在 AngularJS 指令上需要 :ngModel vs. 范围:{ ngModel: '=' }的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  3. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  4. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  5. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  6. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  7. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  8. ruby - rspec 需要 .rspec 文件中的 spec_helper - 2

    我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require，它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中，因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗？ 最佳答案 我不在Bundler上工作，所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件，通常按照当前的惯例，只

  9. ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

  10. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

随机推荐