通过父控制器 AngularJS 设置指令元素属性

set directive element attributes through parent controller AngularJS

本文关键字：指令 元素 属性 设置 AngularJS 控制器      更新时间：2023-09-26

我想通过我的应用程序级控制器配置我的指令模块。普伦克

索引.html 

<div ng-controller="App">
  <foodz index="index"></foodz>
</div>

应用.js

angular.module('app', ['foodz']).
  controller('App', ['$scope',function($scope){
    $scope.index = 1;
  }]);

食物.js

angular.module('foodz', []).
  controller('foodzController', ['$scope',function($scope){
    //Data is coming in through external API
    $scope.$on('foodzFetched', function(e,d) {
      $scope.foodz = d;
    });
    //Lets say data to looks like:
    //[{"name":"banana"},{"name":"smoothy"}]
  }]).
  directive('foodz', function() {
    return {
      restrict: 'E',
      scope:{
        index: '@'
      },
      replace: true,
      controller: 'foodzController',
      templateUrl: 'foodzTemplate.html',
      link: function(scope, controller) {}
    };
});

食物模板.html

<div ng-controller="foodzController">
  <span>
    {{foodz[index].name}}
  </span>
</div>

因此，在此示例中，我尝试将index通过app级控制器传递到指令元素的属性中，该属性也具有自己的控制器。

我在这里做错了什么？

尝试制作scope:{index:'='}

查看指令定义对象

我认为您在控制器中接收index='index'（字符串）。使用 =它将从父控制器获取值。

相关文章：