与指令Angularjs动态HTML编辑字符串里面包含

我一直在尝试动态HTML字符串与工作，但双向绑定似乎并不被working.Need一点帮助here.Below递归解析指令是plunker ： http://plnkr.co/edit/ovz2RJDmnHPgLUqUaH7M 这里是代码：与指令Angularjs动态HTML编辑字符串里面包含

var model = angular.module('modelApp', ['ui.bootstrap']); 

model.controller('modalCtrl', ['$scope', '$window', 
    function($scope, $window) { 
    var modalctrl = this; 
    modalctrl.form = {}; 

    $scope.showMeModalValues = function(){ 
     console.log(modalctrl.form); 
    }; 
    } 
]); 

model.directive('contentInput', ['$compile', 
    function($compile) { 
    return { 
     require: '^ngController', 
     restrict: 'EA', 
     link: function(scope, element, attrs, ctrl) { 
     element.html('<input type="text" ng-model="ctrl.form.' + attrs.name + '" />'); 
     $compile(element.contents())(scope); 
     } 
    }; 
    } 
]); 

model.directive('dynamicInput', ['$compile', '$sce', 
    function($compile, $sce) { 
    return { 
     templateUrl: 'myContent.html', 
     require: '^ngController', 
     restrict: 'EA', 
     link: function(scope, element, attrs, ctrl) { 
     var html = '<content-input name=' + attrs.name + '></content-input>'; 
     scope.html = $sce.trustAsHtml(html); 
     } 
    }; 
    } 
]); 

model.directive('reCompile', ['$compile', 
    function($compile){ 
    return { 
     require: '^ngController', 
     restrict: 'EA', 
     link: function(scope, element, attrs, ctrl){ 
     scope.$watch(attrs.reCompile , function(value){ 
      element.html(value); 
      $compile(element.contents())(scope); 
     }); 
     } 
    }; 
    }]);

来源

2015-11-12 manohar b

为什么你想存储HTML在JavaScript中的变量？这完成了什么，你无法做定义你的数据和使用ng-repeat？ – Claies

什么是你想获得？双向绑定。你的意思是ctrl.form？而不是ng-model =“ctrl.modalctrl.form。”使用ng-model =“modalctrl.form。”随后的console.log完美的作品 –

@Claies：我一直在努力形成通过解析XML代码的HTML元素（持有关于元素和元素类型信息），这就是为什么我一直在这样想出来。 –

我想通了这个问题！ Assiging scope.ctrl用Ctrl做出决议没有更新modalctrl.form Plunker与工作液的问题：http://plnkr.co/edit/ovz2RJDmnHPgLUqUaH7M

model.directive('dynamicInput', ['$compile', '$sce', 
    function($compile, $sce) { 
    return { 
     templateUrl: 'myContent.html', 
     require: '^ngController', 
     restrict: 'EA', 
     link: function(scope, element, attrs, ctrl) { 
     scope.ctrl = ctrl; 
     var html = '<content-input name=' + attrs.name + '></content-input>'; 
     scope.html = $sce.trustAsHtml(html); 
     } 
    }; 
    } 
]);

来源

2015-11-14 05:15:02

我的理解中dynamicInput指令HTML字符串在重新编译指令与NG-模型ctrl.form编译。（attr.name），我们与范围NG-模型copile不知道是什么这CTRL因为它不与scope.So绑定，使用Ctrl分配scope.ctrl帮助了NG-模型值反映在modalctrl.form –

@Claies：谢谢你的建议，我还没有探索库，有助于在建筑形态与JSON数据...感谢您指点这些图书馆。 –

@georgeawg：谢谢你的回答！你甚至可以看看我的答案，这可以解决我的问题。 –

与指令Angularjs动态HTML编辑字符串里面包含

回答

相关问题