you should $compile your html. you can do this by injecting the $compile to
a controller, or if you want to do it straight after your jquery
manipulation, use this:
$(".yor class").each(function () {
var content = $(this);
angular.element(document).injector().invoke(function ($compile) {
var scope = angular.element(content).scope();
$compile(content)(scope);
});
});
On Tuesday, February 10, 2015 at 11:12:58 PM UTC+2, [email protected] wrote:
>
> *This is a form in razor / mvc5 project*
> *Summery:* I'm trying to make multiple "sub-forms" that can be added to
> the form and they all have an file upload script with them.
> Problem is, as far I can notice that the cloned part of angular DOM is not
> initializing/compiling. Just a heads up - I'm still new to angularjs so I
> tried a lot of reading a googling before I posted.
>
> *OrderForm.cshtml* Part that im cloning is a form table .form-group and
> .multiple-form-group :
> <div class="row">
> <div class="col-xs-12" >
> <div class="form-group multiple-form-group" data-max=99>
>
> *<div class="form-group input-group"> <!-- part of code here I'm trying to
> clone -->*
> * <table class="inputtable" >*
> * <tr>*
> * <td id="tableId0" width="0%">*
> * ... *
> * </td>*
> * <td width="14%">*
> * ...*
> * </td>*
> * ......*
> * </tr>*
> * <tr class="dropdown-menu" id="uploadTableMain"
> name="0" style="width:100%;">*
> * <td id="uploadPlaceHolder" width="100%"
> ng-include="'/Content/Order/_Upload.html'"></td> <!-- i tred to call this
> part again when it gets cloned, usually just the rendered part is cloned
> (_Upload.html) and the upload buttons are not working -->*
> * </tr>*
> * </table>*
>
> * <span class="input-group-btn">*
>
> * <button type="button" id="addNewSubOrderBtn" name="0"
> class="btn btn-default btn-add">+</button>*
>
>
> * </span>*
> *<!-- up to here -->*
> * </div> *
> </div>
> </div>
> </div>
>
> *_Upload.html *
> <div class="container" ng-controller="FileUploadCtrl">
>
> <div class="container row">
> <div class="col-xs-2 fileupload-buttonbar">
> <div class="col-lg-push-2 btn-group-vertical">
> <span class="btn btn-success fileinput-button">
> <i class="glyphicon glyphicon-plus"></i>
> <input type="file" name="file"
> data-url="FileContents/Upload"
> multiple upload><span>Add files...</span>
> </span>
>
> <span type="submit" class="btn btn-primary"
> ng-click="upload()">
> <i class="glyphicon glyphicon-upload"></i>
> Upload
> </span>
> <span class="btn btn-warning" ng-click="remove()">
> <i class="glyphicon glyphicon-remove"></i>Remove All
> </span>
> </div>
>
> </div>
> <!-- The table listing the files available for upload/download -->
> <div class="col-xs-10">
> <span ng-if="!files.length">No files selected</span>
> <table>
> <tr ng-repeat="file in files">
> <td width="40%">{{file}}</td>
> <td width="10%">{{file.size}}</td>
> <td width="50%">
> <div class="progress" ng-show="percentage">
> <div class="bar" style="width:
> {{percentage}}%;"></div>
> </div>
> </td>
> </tr>
> </table>
>
>
> </div>
> </div>
>
>
> </div>
>
>
> *appscript.js* (part that is cloning when the )
> $(function () {
>
> var addFormGroup = function (event) {
> $("#uploadTableMain.dropdown-menu").each(function (i, obj) {
> $(obj).removeClass('open');
> $(obj).hide();
>
>
> });
> event.preventDefault();
>
> var $formGroup =
> angular.element($(this).closest('.form-group'));
> var $multipleFormGroup =
> angular.element($formGroup.closest('.multiple-form-group'));
> var $formGroupClone = angular.element($formGroup).clone();
>
> $(this)
> .toggleClass('btn-default btn-add btn-danger btn-remove')
> .html('–');
> $(this).attr("style", "display: inline-block;");
> $formGroupClone.find('input').val('');
> $formGroupClone.insertAfter($formGroup);
>
> //$formGroupClone.find('button#addNewSubOrderBtn.btn.btn-default.btn-add').attr("style",
>
> "display: inline-block;");
> var $lastFormGroupLast =
> $multipleFormGroup.find('.form-group:last');
> if ($multipleFormGroup.data('max') <=
> countFormGroup($multipleFormGroup)) {
> $lastFormGroupLast.find('.btn-add').attr('disabled', true);
> }
>
> $formGroupClone.find('#id').val(NewGuid());
>
> $formGroupClone.find('div.btn-group.fullwidth:last').remove();
>
> $formGroupClone.find('.multiselect').multiselect({
> numberDisplayed: 1,
> enableFiltering: true,
> enableCaseInsensitiveFiltering: true,
> filterPlaceholder: 'Søg...',
> nonSelectedText: 'Vælg produkt',
> nSelectedText: 'valgt'
> });
> //var upl123 = $formGroupClone.find('#uploadPlaceHolder');
> //upl123.html();//("<ng-include
> src=\"'/Content/Order/_Upload.html'\">"));
> //var injector = angular.injector(['ng']);
>
> //"$compile", function ($compile) {
> // var scope = angular.element(upl123).scope();
> // $compile(upl123)(scope);
> //}
> //]);
> //upl123.html("<ng-include
> src=\"'/Content/Order/_Upload.html'\" ></ng-include>")
>
>
> $('.datetimepicker').datetimepicker({
> format: 'DD.MM.YYYY. HH:mm',
>
>
> });
> $('[id^="tableId"]').each(function (i, obj) {
> $(obj).attr("id", "tableId" + i);
> });
> $('[name^="uplBtnTo"]').each(function (i, obj) {
> $(obj).attr("id", i);
> });
> $('tr#uploadTableMain.dropdown-menu').each(function (i, obj) {
> $(obj).attr("name", i);
> });
>
> $('[id^="productType"]').each(function (i, obj) {
> $(obj).attr("name", "ProductType" + i);
>
> });
> $('[id^="addNewSubOrderBtn"]').each(function (i, obj) {
> $(obj).attr("name", i);
>
> });
>
>
>
>
> };
>
>
>
> *app.js *(angularjs script) - that is actually a file upload script
>
> (function () {
> 'use strict';
>
> var app = angular.module('app', []);
>
>
>
> app.controller('FileUploadCtrl',
> ['$scope', '$rootScope', 'uploadManager',
> function ($scope, $rootScope, uploadManager) {
> $scope.files = [];
> $scope.percentage = 0;
> $scope.dotheshow = true;
> $scope.upload = function () {
> uploadManager.upload();
> $scope.files = [];
> };
> $scope.remove = function () {
> $scope.files = [];
> };
>
> $rootScope.$on('fileAdded', function (e, call) {
> $scope.files.push(call);
> $scope.$apply();
> });
>
> $rootScope.$on('uploadProgress', function (e, call) {
> $scope.percentage = call;
> $scope.$apply();
> });
> }]);
>
> app.factory('uploadManager', function ($rootScope) {
> var _files = [];
> return {
> add: function (file) {
> _files.push(file);
> $rootScope.$broadcast('fileAdded', file.files[0].name);
> },
> clear: function () {
> _files = [];
> },
> files: function () {
> var fileNames = [];
> $.each(_files, function (index, file) {
> fileNames.push(file.files[0].name);
> });
> return fileNames;
> },
> upload: function () {
> $.each(_files, function (index, file) {
> file.submit();
>
> });
> this.clear();
> },
> setProgress: function (percentage) {
> $rootScope.$broadcast('uploadProgress', percentage);
> }
> };
> });
>
> app.directive('upload', ['uploadManager', function
> factory(uploadManager) {
> return {
> restrict: 'A',
> link: function (scope, element, attrs) {
> $(element).fileupload({
> dataType: 'text',
> add: function (e, data) {
> uploadManager.add(data);
> },
> progressall: function (e, data) {
> var progress = parseInt(data.loaded / data.total *
> 100, 10);
> uploadManager.setProgress(progress);
> },
> done: function (e, data) {
> uploadManager.setProgress(0);
> }
> });
> }
>
> };
> }]);
>
>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
