Javascript 使用'；这'；或；var Vm=这一点；当使用指令访问时，in控制器未反映值

我在试着用英语写指令。我试图在指令中使用带有值的变量，该指令是使用

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"
    };
  }
})();

(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模板下的结果变量来使用它时，它会显示值

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

输入号码：
x2
结果：{ser.Result}

指令模板

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

数字的平方是{{ser.result}

---

非常感谢您提供的任何帮助。

当您设置

作用域：{}

时，它会创建一个

隔离作用域（这意味着无法访问父作用域），并且其中没有任何项。因此，您无法访问
控制器中的
结果

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

scope: {
   result: '='
};

在模板中

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


输入号码：
x2
结果：{ser.Result}}

当您设置
作用域：{}
时，它会创建一个
隔离作用域
（这意味着无法访问父作用域），并且其中没有任何项。因此，您无法访问
控制器中的
结果

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

scope: {
   result: '='
};

在模板中

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


输入号码：
x2
结果：{ser.Result}}

您需要在作用域中传递结果，如下所示：

指令代码

(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"
    };
  }
})();

(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代码

(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"
    };
  }
})();

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


输入号码：
x2
结果：{ser.Result}}

//在这里通过结果

指令html

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

数字的平方是{{result}

您需要在作用域中传递结果，如下所示：

指令代码

(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"
    };
  }
})();

(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代码

(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"
    };
  }
})();

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


输入号码：
x2
结果：{ser.Result}}

//在这里通过结果

指令html

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

数字的平方是{{result}

谢谢大家：）我在一个服务中调用了乘法，并在这里注入到控制器，所以，我认为这让你们感到困惑，我也尝试了其他例子。我最近在这里发布了我的问题。我已经尝试了针对我的问题所回答的答案：）：）你将以负面声誉告终；）嗨，Tom Shen，我是stackoverflow的新手，关于我的问题，我不知道这个名声，现在我开始知道了。谢谢你们的建议：）谢谢你们：）我在一个服务中调用了乘法，并在这里注入到控制器，所以，我认为这让你们感到困惑，我也尝试了其他例子。我正在新发布我的问题。我已经尝试了针对我的问题所回答的答案：）：）你将以负面声誉告终；）嗨，Tom Shen，我是stackoverflow的新手，关于我的问题，我不知道这个名声，现在我开始知道了。谢谢你的建议：）