Question

在我的项目中，我想访问控制器的$ scope，但是，由于我的范围在指令中，因此使用指令的$ scope。

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

如果我用<card-panel>替换<div>代码，一切正常。但是使用<card-panel>标记时，如果是卡片组范围而不是my-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>

我可以吗？

谢谢

Answer 1

我尝试使用控制器作为语法来解决此问题。使用controllerAs语法，不会混淆范围。

这是工作code

＆＃13;

<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>

＆＃13;

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

＆＃13;

Answer 2

请参阅https://github.com/angular/angular.js/wiki/Understanding-Scopes

会发生什么是子范围获得自己的属性隐藏/隐藏同名的父属性。这不是 AngularJS正在做的事情 - 这就是JavaScript原型继承工作。

请参阅更新的code pen

我已将scope.mycontent ='text'更改为scope.mycontent = {val：'text'}。

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

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

使用指令的范围而不是控制器的范围

2 个答案: