Question

myPage.html下

<div ng-controller="MyPageCtrl">
    <my-custom-directive arg1="{{currentObj.name}}"></my-custom-directive>
<div>

myPageCtrl.js（Controller）

中的

app.controller("MyPageCtrl", ["$scope", function ($scope) {
          $scope.currentObj = {"name":"Collin"};
    }]);

这就是我的指令代码的样子

app.directive("myCustomDirective", [function () {
    return {
        restrict: "E",
        controller: "MyCustomDirCtrl"
    };
}]);

最后，这是我的指令控制器，

app.controller("MyCustomDirCtrl", ["$attrs", function ($attrs) {
      var arg = $attrs.arg1;
      alert('Arg '+arg);
}]);

警报只显示＆＃34; {{currentObj.name}}＆＃34;而不是currentObj的name属性的值。

请你能告诉我解决这个问题的方法。

感谢。

Answer 1

不确定为什么使用$ attrs作为控制器。只需使用正常的$ scope。

<强> myPage.html下

<div ng-controller="MyPageCtrl">
    <my-custom-directive arg1="{{currentObj.name}}"></my-custom-directive>
<div>

myPageCtrl.js（Controller）

app.controller("MyPageCtrl", ["$scope", function ($scope) {
          $scope.currentObj = {"name":"Collin"};
    }]);

<强> myCustomDirective

app.directive("myCustomDirective", [function () {
    return {
        restrict: "E",
        controller: "MyCustomDirCtrl"
    };
}]);

指令的控制器（在此更改$ attrs到$ scope），

app.controller("MyCustomDirCtrl", ["$scope", function ($scope) {
      var arg = $scope.arg1;
      alert('Arg '+arg);
}]);

Answer 2

您可以使用链接功能从指令访问attr，而不是从控制器访问attr。

app.directive("myCustomDirective", [function () {
    return {
        restrict: "E",
        controller: "MyCustomDirCtrl",
        link: function(scope, element, attr) {
            alert(attr.arg1);
        }
    };
}]);

自定义元素指令和属性

2 个答案: