javascript - 使用指令的范围而不是 Controller 的范围

标签 javascript angularjs scope controller directive

在我的项目中,我想访问 Controller 的 $scope,但是,因为我的范围在一个指令中,所以使用了指令的 $scope。

这是一个完美的例子。 http://codepen.io/anon/pen/zrmeZw?editors=1010

如果我替换 <card-panel>带有 <div> 的标签, 一切都好。但是有了 <card-panel>标签,如果是卡片面板范围而不是我的 Controller $scope,则使用 $scope。

JavaScript

app = angular.module('BlankApp', ['ngMaterial']);

app.directive('cardPanel', function () {
  return {
    transclude: true,
    template: '<div style="background:#fff" layout-margin layout-padding><div ng-transclude></div></div>',
    restrict: 'E',
    link: function (scope, element, attrs) {
    }
  };
});

app.controller('MyController', function($scope) {
  $scope.myContent = '';

  $scope.onChangeListener = function() {
    console.log($scope.myContent);
    console.log("toto");
  }


});

html

<body ng-app="BlankApp" ng-cloak style="background:#f1f1f1" layout>
<div ng-controller="MyController">
  <card-panel layout-margin>
    <h1>MyDemo</h1>

    <md-input-container class="md-block">
      <label> demo </label>
      <input ng-change="onChangeListener()" ng-model="myContent"> </input>
    </md-input-contanier>
  </card-panelr>    
  </div>
</div>


  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

</body>

</html>

好的,我可以吗?

谢谢

最佳答案

我试图通过使用 Controller 作为语法来解决这个问题。使用 controllerAs 语法,范围不会混淆。

这是工作 code

<div ng-controller="MyController as myctrl">
  <card-panel layout-margin>
    <h1>MyDemo</h1>
    
    <md-input-container class="md-block">
      <label> demo </label>
      
      <input ng-change="myctrl.onChangeListener()" ng-model="myctrl.myContent"/> 
    </md-input-contanier>
  </card-panelr>    
  </div>
</div>

app.controller('MyController', function($scope) {
  var vm = this;
  vm.myContent = '';
  
  vm.onChangeListener = function() {
   
    console.log(vm.myContent);
    console.log("toto");
    
  }
  
  
});

关于javascript - 使用指令的范围而不是 Controller 的范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35255604/

相关文章:

javascript - AngularJS $scope 反射

javascript - 执行不在 angularjs Controller 中的函数内部

javascript - Var 和 JavaScript 变量作用域

javascript - 使用 webdriverJS 更改 phantomJS 的视口(viewport)大小

javascript - AJAX 响应,未定义(在控制台普通 JSON 中)

javascript - 由于传单中折线的不同距离,在折线上添加标记

javascript - node_modules 文件夹太大

javascript - AngularJS 将 ng-bind-html 制作为动态构造的对象名称

Python,如何更改父作用域中变量的值?

javascript - 更新 Angular forEach 内部的外部变量