使用'this'声明的变量var Vm = this"当使用指令访问时，在控制器中不反映值

The variable declared using 'this' or "var Vm = this" in controller is not reflecting the value when accessed using directive

本文关键字：this 访问 控制器 指令 var 变量 声明 Vm 使用 quot      更新时间：2023-09-26

我正在尝试在angular中使用指令。我试图在使用this或var Vm = this声明的指令内使用变量值。但是变量的值没有显示出来。

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

我附加的控制器和指令的代码:

控制器(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' };
  }
})();
<<p> 指令代码/strong> 
(function() {
  'use strict';
  angular
    .module('serviceApp')
    .directive('sampleDir', sampleDir);
  function sampleDir() {
    return {
      restrict: 'EA',
      scope: {
      },
      templateUrl: "views/directive-template.html"
    };
  }
})();

当我从控制器调用html模板下的result变量时，它显示了值。

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

当您设置scope: {}时，它创建一个isolated scope(这意味着不能访问父作用域)并且其中没有任何项。所以你不能在controller中访问result。

在你的情况下，你可以使用scope: true和你的模板，就像你做的那样，或者改变范围为这个

scope: {
   result: '='
};

和模板中的

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

这将是指令的模板。

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

更多信息请参见此处创建自定义指令

这是scope: {} 修改后的示例

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>

您需要像这样在作用域中传递结果:

<<p> 指令代码/strong> 
(function(){
    'use strict';
    angular
    .module('serviceApp')
    .directive('sampleDir', sampleDir);
    function sampleDir() {
        return {
            restrict: 'EA',
            scope: {
                result: "="  // added this line
            },
            templateUrl: "views/directive-template.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>
<div>
    <sample-dir result="ser.result"></sample-dir> // pass result here
</div>

指令html 

<p>Square of the number is <strong>{{result}}</strong></p>
相关文章：