Question

我有这段代码：

<body ng-controller="testController">
    <div test-directive transform="transform()">
    </div>


    <script type="text/ng-template" id="testDirective.html">
        <div>
            <p>
                {{transform()}}
            </p>
        </div>
    </script>

    <script>
        angular.module("Test", [])
        .directive("testDirective", function() {
            return {
                templateUrl: "testDirective.html",
                scope: {
                    transform: "&"
                },
                link: function(scope) {

                }
            };
        })
        .controller("testController", function($scope) {
            $scope.transform = function() {
                return "<a ng-click='somethingInController()'>Do Something</a>";
            };

            $scope.somethingInController = function() {
                alert("Good!");
            };
        });
    </script>

</body>

基本上我想要完成的是创建一个带有从控制器调用的方法的指令。并且该方法将对传递的值执行某些操作（在此示例中，它不会收到任何内容，但在实际代码中它不会收到）。

到目前为止工作正常。但是，我要做的下一件事是创建一个将调用控制器中的方法的元素。该指令不知道将是什么类型的元素（可以是任何东西），也不知道将是什么方法。有没有办法做到这一点？

小提琴示例：

http://jsfiddle.net/abrahamsustaita/C57Ft/0/ - 版本0

http://jsfiddle.net/abrahamsustaita/C57Ft/1/ - 版本1

FIDDLE示例工作

http://jsfiddle.net/abrahamsustaita/C57Ft/2/ - 第2版

版本2现在正在运行（我不确定这是否可行，但它有效......）。但是，我无法在父控制器中执行该方法。

Answer 1

是。但是，您的代码存在一些问题。我将首先回答你的问题。

<test-directive transform='mycustommethod'></test-directive>

// transform in the directive scope will point to mycustommethod
angular.module('app').directive('testDirective', function() {
    return {
        restrict: 'E',
        scope: {
            transform: '&'
        }
    }
});

问题是打印html会被转义，你会得到＆amp; lt;而不是＆lt; （等等。）。您可以使用ng-bind-html，但不会绑定返回的html。您需要在链接方法中手动注入html（可以使用jquery）并使用var compiled = $compile(html)(scope)绑定结果。然后致电ele.after(compiled)或ele.replace(compiled)将其添加到您的信息页。

Answer 2

我终于开始工作了。

合并解决方案。首先，我需要添加另一个指令来解析我想要的元素：

.directive("tableAppendElement", function ($compile) {
    return {
        restrict: "E",
        replace: true,
        link: function(scope, element, attrs) {
            var el = angular.element("<span />");
            el.append(attrs.element);
            $compile(el)(scope);
            element.append(el);
        }
    }
})

这将接收将附加的元素/文本，然后将其注册到范围。

然而，问题仍然存在。如何访问控制器的范围？由于我的指令将被许多控制器使用，并且将取决于控制器的模型，因此我只设置范围：false。有了它，现在可以从指令中访问控制器中的每个方法：D

请参阅fiddle working here。这也对我有所帮助，因为现在不需要传递变换方法，因此控制器也可以处理它。

angularjs和自定义方法/ html的指令

2 个答案: