Question

目前我有以下代码，

var myApp= angular.module('myApp', ['myCTRL']);
var myCTRL= angular.module('myCTRL', []);

myCTRL.controller('myCTRL', ['$scope', '$http', '$window', function ($scope, $http, $window) {
    $http.get('/someURL').success(function (data) {
        $scope.recordObject = data.recordObject;
    });
    $scope.testFunction= function () {
      $scope.testModel= 'clicked!!!!!';

   };

}]);

根据我从HTTP请求得到的内容，我会得到一个recordObject。有没有办法让我创建HTML模板并根据这个recordObject编译它？我打算创建一个无法通过ng-repeat标签实现的复杂表格。

首先尝试，我尝试使用id＆＃39; demoDirective＆＃39;创建一个div。但这只会打印出{{recordObject}}。如果我尝试使用console.log（recordObject），那么它也是未定义的。

myCTRL.directive('demoDirective', function ($compile) {
    return {
        replace: true,
        link: function (scope, element, attrs, controller, transcludeFn) {
            var html= '<div>{{recordObject}}</div>'
            $compile(html)(scope);
            element.append(test);
        }
    }
})

我的第二次尝试是使用编译。 {{recordObject}}将打印出来。但是，我无法在此函数中访问recordObject。我读到我无法在编译函数中访问范围。我想从recordObject执行登录以创建我想要的HTML。

myCTRL.directive('demoDirective', function ($compile) {
    return {
        replace: true,
        compile: function (element, attrs) {
        var html= '<div>{{recordObject}}</div>'
        element.replaceWith(html);
    }
})

我的第三个尝试是将指令附加到myApp而不是myCTRL。在这种情况下，我可以访问scope.recordObject，这是完美的。但是，我编译的html没有ng-功能。

myApp.directive("demoDirective", function ($compile) {
    return function (scope, element, attrs) {
        var html = '<input type="text" ng-model="testModel"> <button ng-click="testFunction()">testButton</button>;
        $compile(html)(scope);

    };
});

附加允许AngularJS功能的HTML

0 个答案: