Переменная, объявленная с использованием 'this' или “var Vm = this” в контроллере, не отражает значение при доступе с использованием директивы

0

Я стараюсь, чтобы директивы были угловатыми. Я пытался использовать переменные со значениями внутри директивы, которая объявляется с использованием 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"
    };
  }
})();

Когда я использую переменную result под шаблоном 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>

Пожалуйста, любая помощь по этому поводу очень ценится.

Теги:
variables
controller
directive

2 ответа

1
Лучший ответ

Когда вы задаете scope: {}, она создает isolated scope (что означает отсутствие доступа к родительским областям) и не содержит в ней каких-либо элементов. Таким образом, вы не можете получить доступ к result в controller.

В вашем случае вы можете использовать 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>
Поделиться
1

Вы должны передать результат в области следующим образом:

директивный код

(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>
Поделиться
  • 0
    Спасибо, ребята :) Я вызвал умножение в сервисе и вставил сюда в контроллер, так что, я думаю, это смутило вас, это сработало, я попробовал и с другим примером.
  • 0
    не забудьте принять один ответ;)
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню