javascript - 如何使用 "this"定义的指令访问模型的数据 Controller 内部指令?

标签 javascript angularjs

我对指令的访问数据感到困惑,特别是当我定义了我的模型时,例如:

vm = this;
vm.myModel = "hello";

我的指令:

function mySelectedAccount(){
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          element.on('click', function() {
            console.log(scope.myModel);                
          });
        }
      }
    }

由于我没有使用 $scope,如何跨指令访问 Controller 内定义的“myModel”?如果我尝试使用 scope< 访问它/em> 我的指令中的参数未定义。

感谢您的宝贵时间

最佳答案

在这里,您的 vm 变量指的是您的 Controller 实例。在您的作用域中,您将 Controller 上下文注册到 vm 变量中。

所以你可以这样做:

Controller

(function(){

function Controller($scope) {

  var vm = this;
  vm.myModel = 'toto';

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

指令

(function(){

  function directive() {
    return {
      link:function(scope, element, attrs){
        element.on('click', function() {
          //Access to vm property wrap into the scope
          console.log(scope.vm.myModel);
        });
      }
    };
  }

angular
  .module('app')
  .directive('directive', directive);

})();

然后在您的 html 中,您可以使用 controllerAs 语法:

HTML

  <body ng-app='app' ng-controller="ctrl as vm">
    <div directive>{{vm.myModel}}</div>
  </body>

您可以在这里看到Working Plunker

关于javascript - 如何使用 "this"定义的指令访问模型的数据 Controller 内部指令?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32230422/

相关文章:

javascript - 如何使用变量为对象属性赋值?

java - 如何将 JavaScript 与 gwt Uibinder 一起使用

javascript - Angular Scope 事件(通过 `$broadcast` 发送)会进入事件队列吗?

javascript - 带有 json 参数的 Angular http 请求

android - $http 请求状态 0 和 https

javascript - AngularJS:出现 "[...] is not a function"错误

javascript - node.js:从另一个模块访问局部变量

javascript - 与 YUI 2.7 同步 GET 请求?

javascript - 关闭 Bootstrap 模式弹出窗口时调用方法