1

指令書を書いています。

これは私が使用しているコードです:

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 が定義されていないためできません。

リンク関数を呼び出す前にスコープが定義されるのを待つにはどうすればよいですか?

または、これを行うためのより効率的で効率的な (パフォーマンスに関する) 方法はありますか? 助けてくれてどうもありがとう

4

2 に答える 2

1

第1の方法：<my-weather ng-if="zones[0].weatherData.weather_type" ...変数が解決されるまで、ディレクティブだけが起動されません。2 番目の方法: ディレクティブで「weatherType」にウォッチを使用し、ラベルを更新します。

PSあなたのスイッチは素晴らしいですが、より良い初期化マップすなわち

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

そこからラベルを取得するだけです。

于 2016-06-14T14:54:40.540 に答える
0

双方向バインディングの分離スコープを使用しています。ドキュメントは次のように述べています。

= または =attr - ローカル スコープ プロパティと属性 attr を介して渡される式との間の双方向バインディングを設定します。式は、親スコープのコンテキストで評価されます。属性名が指定されていない場合、属性名はローカル名と同じであると見なされます。

コントローラのzone[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>
于 2016-06-14T15:44:12.790 に答える