Question

我正在写一个指令。

这是我使用的代码：

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是未定义的。

如何在调用链接函数之前等待范围定义？

或者，是否有更好，更有效（表现明智）的方式来做到这一点？非常感谢任何帮助

Answer 1

第一种方式：Material[] mats = renderer.materials; mats[4] = availableMaterials[i]; renderer.materials = mats;所以只是你的指令没有启动，直到变量得到解决。第二种方式：使用手表＆＃39; weatherType＆＃39;在指令中并更新您的标签。

P.S。你的开关真棒，但更好的初始化地图即

<my-weather ng-if="zones[0].weatherData.weather_type" ...

并从中检索标签。

Answer 2

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

= or = attr - 在本地范围属性和通过属性attr传递的表达式之间建立双向绑定。该表达式在父作用域的上下文中计算。如果没有attr 指定name，然后假定属性名称与本地名称。

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

我在plunker上写了一个例子。您会看到双向绑定的工作原理。

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>

angularjs - 调用链接函数时尚未提供的scope属性

2 个答案: