Question

我一直在开发一个AngularJS指令，该指令应该作为独立的小部件工作，可以通过以对象的形式设置属性来配置。我的主要目标如下：

根据传入属性的Object执行内部指令处理。处理确实涉及获取REST API响应。所以我正在使用控制器来实现这一目标。
在我的指令执行某些处理之后，它可能会更改我的父控制器应该能够更改的对象。

以下是涵盖我目标的示例代码。

指令用法：

<post-listing page-id="currentPage.id" config="postConfig" posts="posts" />

指令代码

'use strict';

angular.module('myApp')
    .directive('postListing', function () {
      return {
          templateUrl: '/views/directive.post-listing.html',
          restrict: 'EA',
          scope: {
              page_id:"=", 
              config:"=",
              posts:"=",
          },
          controller: "DirectivePostListingCtrl"

        };
    });

指令控制器代码：

'use strict';

angular.module('myApp')
    .controller('DirectivePostListingCtrl', function ($scope, $rootScope, $routeParams)
    {
        // Here I want to access the page_id and config as the actual value

        // Here I will also update the posts array which is exposed to outside of directive.
    });

模板代码：

<h4>Displaying Posts for {{page.title}}</h4>
<ul>
    <li ng-repeat="p in posts" >{{p.title}}</li>
</ul>

当我运行此代码时，它表示$ scope.page_id ＆＃34; undefined＆＃34; 或者说＆＃34; currentPage.id＆＃34; （基于运算符选择=或@）我希望它是currentPage.id的值。

请建议。

提前致谢。

Answer 1

您没有关注隔离范围属性名称的camelCase命名规则。如果您使用此配置，您将能够访问页面ID：

scope: {
    pageId: "=", 
    config: "=",
    posts: "=",
},

并在控制器中：

console.log($scope.pageId);

Answer 2

<post-listing data="PostListing" />

//使用它在控制器中

'use strict';

angular.module('myApp')
    .controller('DirectivePostListingCtrl', function ($scope, $rootScope, $routeParams)
    {
        $scope.PostListing={}
        $scope.PostListing.pageId=//Your Data
        $scope.PostListing.config=//Your Data
        $scope.PostListing.posts=//Your Data
    });

在指令中进行更改

angular.module('myApp')
    .directive('postListing', function () {
      return {
          templateUrl: '/views/directive.post-listing.html',
          restrict: 'EA',
          scope: {
              data:"="
          },
          controller: "DirectivePostListingCtrl"

        };
    });

使用模板中的代码

<ul>
    <li ng-repeat="p in data.posts" >{{p.title}}</li>
</ul>

Answer 3

有三个主要问题：

，该属性需要是评估值。所以在属性中它应该是：page-id="{{currentPage.id}}"。请在此处查看更好的解释：https://stackoverflow.com/a/14063373。
正如@dfsq所说， page_id应该是pageId 。

以下是带有解决方案：http://plnkr.co/edit/z843xZjIDQVe11edYLDR?p=preview

您的自定义指令不应该是无效元素。最好关闭像</post-listing>这样的标签，以避免出现奇怪的行为。在我的例子中，chrome将指令中的所有内容包装到div的末尾。这是一个使用transclude的plunker来显示我的段落被包装在自定义指令中：http://plnkr.co/edit/H3mDdi631flnC8AG2Q8i?p=preview

将动态数据传递给angularjs指令的正确方法

3 个答案: