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

第一种方式：<my-weather ng-if="zones[0].weatherData.weather_type" ...所以只有你的指令才会被启动，直到变量被解决。第二种方法：在指令中的“天气类型”上使用手表并更新您的标签。

PS你的开关很棒，但更好的初始化映射即

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

并从中检索标签。

于 2016-06-14T14:54:40.540 回答
0

您正在使用双向绑定隔离范围。医生说：

= 或 =attr - 在本地范围属性和通过属性 attr 传递的表达式之间设置双向绑定。表达式在父作用域的上下文中计算。如果未指定 attr 名称，则假定属性名称与本地名称相同。

您的控制器中zone[0].weatherData.weather_type的值是多少？如果此属性未定义，则指令中的scope.weatherType也未定义。

我在 plunker 上写了一个例子。你会看到双向绑定是如何工作的。

https://plnkr.co/edit/qK70Z1t1CLI0o5bV7a0Y

脚本.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);
      }
    }
  });

索引.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 回答