javascript - 在 Controller 中使用 'this' 或 "var Vm = this"声明的变量未反射(reflect)使用指令访问时的值

Question

我正在尝试 Angular Directive(指令)。我试图在使用 this 或 var Vm = this 声明的指令内使用带有值的变量。但变量的值没有显示。

当我尝试调用指令内的变量时。当在指令声明下调用作用域:{}时，就会发生这种情况。

我附上了 Controller 和指令的代码:

Controller (js代码)

(function() {
  'use strict';

  angular
    .module('serviceApp')
    .controller('ServiceCtrl', ServiceCtrl);

  ServiceCtrl.$inject = ['$scope', 'serviceService'];

  function ServiceCtrl($scope, serviceService) {

    var Vm = this;

    Vm.square = function() {
      Vm.result = serviceService.square(Vm.number);
    };

    // $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    // $scope.igor = { name: 'Igor', address: '123 Somewhere' };
  }
})();

指令代码

(function() {
  'use strict';

  angular
    .module('serviceApp')
    .directive('sampleDir', sampleDir);

  function sampleDir() {
    return {
      restrict: 'EA',
      scope: {

      },
      templateUrl: "views/directive-template.html"
    };
  }
})();

当我通过从 Controller 调用结果变量来使用 html 模板下的结果时，它会显示该值。

<div ng-controller="ServiceCtrl as ser">
  <label for="num">Enter the number:</label>
  <input type="text" id="num" ng-model="ser.number" ng-keyup="ser.square();">
  <button>x2</button>

  <p>Result: {{ser.result}}</p>

  <div>
    <sample-dir></sample-dir>
  </div>
</div>

指令模板

<p>Square of the number is <strong>{{ser.result}}</strong></p>

请您提供任何帮助，我们将不胜感激。

Answer 1

当您设置 scope: {} 时，它会创建一个隔离范围(这意味着无法访问父范围)，并且其中不包含任何项目。因此您无法在 Controller 中访问结果。

在您的情况下，您可以使用 scope: true 并像您一样使用您的模板，或者将范围更改为此

scope: {
   result: '='
};

在模板中

<sample-dir result='ser.result'></sample-dir> 

这将是指令的模板。

<p>Square of the number is <strong>{{result}}</strong></p>

更多信息请参见此处 Creating Custom Directives

这是一个经过善意更改的示例，范围:{}

angular.module('serviceApp', []).controller('ServiceCtrl', ServiceCtrl);

ServiceCtrl.$inject = ['$scope'];

function ServiceCtrl($scope) {

 var Vm = this;
  Vm.number = 0;

 Vm.square = function () {
    Vm.result = Vm.number * Vm.number;
 };

 // $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
 // $scope.igor = { name: 'Igor', address: '123 Somewhere' };
 }



 angular .module('serviceApp').directive('sampleDir', sampleDir);

  function sampleDir() {
    return {
      restrict: 'EA',
      scope: {
        result: '='
      },
      template: '<p>Square of the number is <strong>{{result}}</strong></p>'
    };
  }


 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='serviceApp' ng-controller="ServiceCtrl as ser">
<label for="num">Enter the number: </label>
 <input type="text" id="num" ng-model="ser.number" ng-keyup="ser.square();"> 
 <button>x2</button>

 <p>Result: {{ser.result}}</p> 


 <div>
 <sample-dir result='ser.result'></sample-dir> 

 </div>

这是一个经过善意更改的示例，其中 scope: true

 angular.module('serviceApp', []).controller('ServiceCtrl', ServiceCtrl);

    ServiceCtrl.$inject = ['$scope'];

    function ServiceCtrl($scope) {

     var Vm = this;
      Vm.number = 0;

     Vm.square = function () {
        Vm.result = Vm.number * Vm.number;
     };

     // $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
     // $scope.igor = { name: 'Igor', address: '123 Somewhere' };
     }



     angular .module('serviceApp').directive('sampleDir', sampleDir);

      function sampleDir() {
        return {
          restrict: 'EA',
          scope: true,
          template: '<p>Square of the number is <strong>{{ser.result}}</strong></p>'
        };
      }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='serviceApp' ng-controller="ServiceCtrl as ser">
  <label for="num">Enter the number: </label>
  <input type="text" id="num" ng-model="ser.number" ng-keyup="ser.square();"> 
  <button>x2</button>

  <p>Result: {{ser.result}}</p> 


  <div>
    <sample-dir></sample-dir> 

</div>