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

Question

我正在尝试 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' };
  }
})();

指令代码

(function() {
  'use strict';

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

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

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

当我通过从控制器调用它来使用 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: {} 时，它会创建一个 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>

更多请看这里Creating Custom Directives

这是一个用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>

Answer 2

您需要像这样在范围内传递结果：

指令代码

(function(){

    'use strict';

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

    function sampleDir() {
        return {
            restrict: 'EA',
            scope: {
                result: "="  // added this line
            },
            templateUrl: "views/directive-template.html"
        };
    }
})();

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>

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

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

javascript

variables

controller

directive

angularjs