angularjs - свойство недоступно при вызове функции ссылки

Я пишу директиву.

Это код, который я использую:

angular.module('weather', []).directive('myWeather', [
  '$ionicSideMenuDelegate', function($ionicSideMenuDelegate) {
    var createWeatherConditionLabel, linkFunction;

    createWeatherConditionLabel = function(type) {
      var label;
      label = '';
      debugger;
      switch (type) {
        case 0:
          label = 'Clear';
          break;
        case 1:
          label = 'Clear';
          break;
        case 2:
          label = 'Light Cloud';
          break;
        case 3:
          label = 'Light Cloud';
          break;
        case 5:
          label = 'Windy';
          break;
        case 6:
          label = 'Foggy';
          break;
        case 7:
          label = 'Cloudy';
          break;
        case 15:
          label = 'Rain';
          break;
        case 18:
          label = 'Sleet';
          break;
        case 21:
          label = 'Hail';
          break;
        case 27:
          label = 'Snow';
          break;
        case 30:
          label = 'Showers';
      }
      return label;
    };

    linkFunction = function(scope, el, attr) {
      console.log("scope:", scope);
      scope.showWeatherDetails = false;
      scope.evtClickExpandMenuWeather = function() {
        if (scope.showWeatherDetails === false) {
          return scope.showWeatherDetails = true;
        } else {
          return scope.showWeatherDetails = false;
        }
      };
      scope.$watch((function() {
        return $ionicSideMenuDelegate.isOpenRight();
      }), function(isOpen) {
        if (!isOpen) {
          return scope.showWeatherDetails = false;
        }
      });
      return scope.weatherLabel = createWeatherConditionLabel(scope.weatherType);
    };
    return {
      restrict: 'E',
      replace: true,
      templateUrl: './directives/tpl.html',
      scope: {
        weatherData: "=",
        weatherType: "="
      },
      link: linkFunction
    };
  }
]);

и директива называется так:

<my-weather weather-data="zones[0].weatherData" weather-type="zones[0].weatherData.weather_type"></my-weather>

Мне нужно вызвать функцию для создания weatherLabel и использовать это в шаблоне директивы, но я не могу, потому что scope.weatherType не определен.

Как я могу дождаться определения области, прежде чем вызывать функцию ссылки?

или есть лучший и эффективный (с точки зрения производительности) способ сделать это? большое спасибо за любую помощь

Источник

2 ответа

Решение

1-й способ: <my-weather ng-if="zones[0].weatherData.weather_type" ... так что ваша директива не запускается до тех пор, пока переменная не будет разрешена. 2-й способ: используйте watch на 'weatherType' в директиве и обновите свой ярлык.

PS твой переключатель классный, но лучше init map т.е.

var LABELS = {0 : '...', 1 : '...', ...}

и просто получить ярлык из него.

Источник

Вы используете двунаправленную область привязки изолята. Док говорит:

= or = attr - установить двунаправленную привязку между локальным свойством области видимости и выражением, переданным через атрибут attr. Выражение оценивается в контексте родительской области. Если имя атрибута не указано, то предполагается, что имя атрибута совпадает с локальным именем.

Какое значение зоны [0].weatherData.weather_type в вашем контроллере? Если это свойство не определено, scope.weatherType в вашей директиве тоже не определено.

Я написал пример на плункер. Вы видите, как работает двунаправленная привязка.

https://plnkr.co/edit/qK70Z1t1CLI0o5bV7a0Y

script.js

var appModule = angular.module('myApp', [])
  .controller('testCtrl', ['$scope', function($scope) {
    $scope.controllerScope = {
      "message": "I am a two ways binding isolate scope"
    };
  }])
  .directive('testDirective', function() {
    return {
      templateUrl: "directive-tpl.html",
      replace: true,
      restrict: "E",
      scope: {
        directiveScope: "="
      },
      link: function(scope) {
        console.log(scope.directiveScope.message);
      }
    }
  });

index.html

<!DOCTYPE html>
<html ng-app='myApp'>

  <head>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller='testCtrl'>
    <p>TEST ISOLATE SCOPE</p>
    <p>This is controllerScope:</p>
    <p>{{controllerScope}}</p>
    <test-directive directive-scope='controllerScope'></test-directive>
  </body>

</html>

Директива-tpl.html

<div>
  <p>Hello! I am the template of test-directive</p>
<p>In my scope i have this: </p>
<p>{{directiveScope}}</p>
</div>
Источник
Другие вопросы по тегам