Question

在文档中我可以阅读下一个require选项：

当指令使用此选项时，$ compile将引发错误除非找到指定的控制器。 ^前缀意味着这个指令在其父节点上搜索控制器（没有^ 前缀，该指令将自己寻找控制器元素）。

所以我尝试使用它：

<div ng-sparkline></div>

app.directive('ngCity', function() {
  return {
    controller: function($scope) {}
  }
});

app.directive('ngSparkline', function() {
  return {
    restrict: 'A',
    require: '^ngCity',
    scope: {},
    template: '<div class="sparkline"><h4>Weather </h4></div>',
    link: function(scope, iElement, iAttrs) {
      // get weather details
    }
  }
});

但如果我的html没有ng-city属性，那么我有一个错误，所以如果我需要另一个指令的控制器 - 需要在html中添加完全相同的属性，但为什么（<div ng-sparkline ng-city="San Francisco"></div>）？它看起来在另一个指令的控制器上有这个名字（指令!!!）而不是在这个名字的控制器上，是真的吗？谢谢。只是想说清楚

Answer 1

使用require，您可以获得另一个（合作）指令的控制器。 Angular中的控制器在语义上不是一个函数，而是一个对象构造函数，即基本上称为var c = new Controller()（为了清楚起见，这是一个简化）。由于控制器是一个对象，它可以具有属性和方法。通过要求另一个指令的控制器，您可以访问这些属性/方法。修改您的示例以演示：

app.directive('ngCity', function() {
    return {
        controller: function($scope) {
            this.doSomething = function() {
                ...
            };
        }
    }
});

app.directive('ngSparkline', function() {
    return {
        restrict: 'A',
        require: '^ngCity',
        scope: {},
        template: '<div class="sparkline"><h4>Weather </h4></div>',
        link: function(scope, iElement, iAttrs, ngCityController) {
            // use the controller, e.g.
            ngCityController.doSomething();
        }
    }
});

在您的情况下，city将是ngCity指令的控制器的属性，作为属性公开。 ngSparkline将会读取该图表以了解图表所在的城市。

Answer 2

<b> added directives.js</b>
<code>
app.directive('ngSparkline', function () {
    return {
        restrict: 'A',
        require: '^ngCity',
        scope: {
            ngCity: '@'
        },
        templateUrl: '/scripts/templates/tpl.html',
        controller: ['$scope', '$http', function ($scope, $http) {
            var url = "https://api.openweathermap.org/data/2.5/forecast/daily?mode=json&units=imperial&cnt=7&callback=JSON_CALLBACK&q=";
            console.log(url + $scope.ngCity);
            $scope.showTemp = function () {
                $scope.getTemp($scope.ngCity);
            };
            $scope.getTemp = function (city) {
                $http({
                    method: 'JSONP',
                    url: url + city
                }).success(function(data) {
                    var weather = [];
                    angular.forEach(data.list, function(value){
                        weather.push(value);
                    });

                $scope.weather = weather;

                });
            }
        }],
        link: function (scope, iElement, iAttrs, ctrl) {
            scope.getTemp(iAttrs.ngCity);
            scope.$watch('weather', function (newVal) {
                if (newVal) {
                    var highs = [];
                    angular.forEach(scope.weather, function (value) {
                        highs.push(value.temp.max);
                    });
                    //chartGraph(iElement, highs, iAttrs);

                }
            });
        }
    }
}).directive('ngCity', function () {
    return {
        controller: function ($scope) {
            //console.log("hello");
        }
    }
});
</code>

<b> and added tpl.htm</b>

<code>
<div class="sparkline">
    <input type="text" data-ng-model="ngCity">
    <button ng-click="showTemp()" class="btn1">Check {{ngCity}}</button>
    <div style="color:#2743EF">{{weather}} ºC</div>
    <div class="graph"></div>
</div>
</code>

如何在指令中使用require选项

2 个答案: