指令参数嵌套控制器简单示例

时间:2014-06-01 20:10:37

标签: javascript angularjs controller angularjs-directive

以下是代码

app.directive('hello', function() {
    return {
        restrict: "E",
        templateUrl: "/Angular/Modules/Selector.html",
        controller: function () {
          this.message = [want the attribute message here]
        }
    };
});

标记

<hello message="hello world instance 1"></hello>

<hello message="hello world instance 2"></hello>

最后,问题

如何将每个hello元素的属性放入控制器实例中?

绑定dataSource属性

<hello ... datasource="/jsonData.json"></hello>

<hello ... datasource="/otherJsonData.json"></hello>

更多控制器代码

$http.get($attrs.datasource).success(function (data) { ... });\

数据源是共享的,但我需要两个单独的实例。

1 个答案:

答案 0 :(得分:0)

谢谢Blackhole的建议!

工作代码

我现在可以得到属性,正如他解释的那样。我注意到这些属性奇怪地改变了所有小写,但对我来说没问题。此外,范围:{} 可以创建隔离的实例。

app.directive('selector', function () {
    return {
        restrict: "E",
        templateUrl: "/Angular/Modules/Selector.html",
        scope : {},
        controller:  function ($http, $scope, $element, $attrs) {
           ...
            this.displayField = $attrs.displayfield;
           ...
            $http.get($attrs.datasource).success(function (data) {
            ...
            });
        },
        controllerAs : "selector"
    };
});

标记

除了我添加的新属性而不是消息之外,没有什么大的改变。

<selector id="selector1" datasource="/Company/CompanyListViewData2"
    displayfield="Name"></selector>
<selector id="selector2" datasource="/Employee/SimpleEmployeeListViewData"
    displayfield="LastNameFirstName"></selector>

再次感谢,这很棒!