Question

所以我正在做的是通过Factory将一个指令作为属性添加到元素中。我有一个单独的指令文件，它根据在该元素上触发的某个事件来操纵DOM，该元素是新添加的指令作为属性的元素。现在发生的事情是首先调用指令文件，它搜索DOM并没有找到指令标记。工厂调用after指令成功地将属性添加到DOM元素，但问题是属性不被识别为指令，它只是假定它是一个简单的元素属性。现在我想要的是再次遍历DOM的指令文件，这次它可以将指令作为属性标记找到并相应地操作DOM。

代码的幼稚版本如下：

的index.html -

<html ng-app='myApp'>
    <body ng-controller='myController'>
        <div id="demo">
            Clicking here should console Hola!!
        <div>
        //Script tags for all the 3 files above
    </body>
</html>>

控制器文件 -

namespace angular {
var app = angular.module('myApp');
app.controller('myController', myController);

export class myController {
    static $inject = ['myFactory'];
    constructor(private myFactory: any) {
        this.myFactory = myFactory;
        console.log('myController Constructor Called');
    }
}}

工厂档案 -

namespace angular {
var app = angular.module('myApp');

app.factory('myFactory', function () {
    var node = document.getElementById("demo");;
    node.setAttribute("directive-tag", "");
    return "";
}); }

指令文件 -

namespace std{
var app = angular.module('myApp', []);

app.directive('directive-tag', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attribute) {
            console.log('Hola!');
        }
    };
}); }

PS：这一切都应该在页面加载时发生。

任何帮助将不胜感激！提前致谢。

Answer 1

在您的代码中，将'directive-tag'指令名称替换为'directiveTag'，然后在html代码中将其用作directive-tag。

在此示例中，您可以看到我们使用$compile来定义angularjs中的属性，这里我们从控制器设置属性，您可以随意更改它。

＆＃13;

var app = angular.module("app", []);

app.controller("ctrl", function ($scope, factory) {
    factory.addAtrr("#test", "class", "test");
    factory.addAtrr("#test", "value", 123);
    factory.addAtrr("#test", "object", JSON.stringify({ value: 555 }));
})

app.factory("factory", function ($rootScope, $compile) {
    var object = {};

    object.addAtrr = function (target, key, value) {
        var element = angular.element(document.querySelector(target));
        element.attr(key, value);
        $compile(element)($rootScope);
    }

    return object;
})

app.directive("test", function () {
    return {
        restrict: 'C',
        scope: {
            value: "@",
            object: "=",
        },
        link: function (scope, el, attr) {
            scope.$watch("value", function (newValue, oldValue) {
                if (angular.isDefined(newValue)) {
                    console.log(newValue)
                }
            })
            scope.$watch("object", function (newValue, oldValue) {
                if (angular.isDefined(newValue)) {
                    console.log(newValue)
                }
            })
        }
    };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">

    <div id="test">
        test
    </div>
</div>

＆＃13;

Angular js - 如何在动态创建指令后调用指令？

1 个答案: