Question

我需要将指令中定义的Id传递给关联的控制器，以便可以在HTTP Get中使用它来检索一些数据。

代码在当前状态下正常工作，但是当尝试动态绑定Id时，如其他问题所示，未定义的＆＃39;发生错误。

需要使用HTML中的指令定义Id以满足要求。代码如下;

Container.html

<div ng-controller="IntroSlideController as intro">
   <div intro-slide slide-id="{54BCE6D9-8710-45DD-A6E4-620563364C17}"></div>
</div>

eLearning.js

var app = angular.module('eLearning', ['ngSanitize']);

app.controller('IntroSlideController', ['$http', function ($http, $scope, $attrs) {
    var eLearning = this;
    this.Slide = [];
    var introSlideId = '{54BCE6D9-8710-45DD-A6E4-620563364C17}'; //Id to replace

    $http.get('/api/IntroSlide/getslide/', { params: { id: introSlideId } }).success(function (data) {
        eLearning.Slide = data;
    });
}])
    .directive('introSlide', function () {
        return {
            restrict: 'EA',
            templateUrl: '/Modules/IntroSlide.html',
            controller: 'IntroSlideController',
            link: function (scope, el, attrs, ctrl) {
                 console.log(attrs.slideId); //Id from html present here
            }
        };
    });

Answer 1

不是定义包含指令的控制器div，而是更合适的方法是在指令本身中定义控制器。此外，通过为指令定义隔离范围，slide-id将在指令控制器中自动使用（因为Angular将为您注入$scope值）：

.directive('introSlide', function () { // here we define directive as 'A' (attribute only) // and 'slideId' in a scope which links to 'slide-id' in HTML return { restrict: 'A', scope: { slideId: '@' }, templateUrl: '/Modules/IntroSlide.html', controller: function ($http, $scope, $attrs) { var eLearning = this; this.Slide = []; // now $scope.slideId is available for use $http.get('/api/IntroSlide/getslide/', { params: { id: $scope.slideId } }).success(function (data) { eLearning.Slide = data; }); } }; });

现在，您的HTML无需包装div：

<div intro-slide slide-id="{54BCE6D9-8710-45DD-A6E4-620563364C17}"></div>

在IntroSlide.html中，您的参考文件可能看起来像intro.*（因为您的原始代码使用intro作为对控制器$scope的引用）。您可能需要删除intro.前缀才能使其正常工作。

Answer 2

在你的指令中需要你的控制器，如下所示：

app.directive( 'directiveOne', function () {
      return {
        controller: 'MyCtrl',
        link: function(scope, el, attr, ctrl){
           ctrl.myMethodToUpdateSomething();//use this to send/get some msg from your controller
        }
      };
    });

AngularJS从控制器访问指令中的属性

2 个答案: