Смешивание Угловая с MVC частичным видом

Question

Что мне нужно

цепочку экранов, каждый открыть следующий экран на кнопку мыши. Каждый предыдущий экран должен быть свернут и новый экран должен быть добавлен путем загрузки частичного представления из бэкэнда MVC.

То, что я

An AngularJS контроллер с помощью следующей функции:

self.AddChild = function (uri, targetContainerId, collapseTitle, breadCrumbContainerId) { 
    var target = $("#" + targetContainerId); 

    if (target != 'undefined' && target != undefined && target.length > 0) { 
     apiService.Get(uri).then(function (viewData) { 
      self.CollapsePreviousChild(self.ChildCount); 

      // Increase childcount by 1 
      self.ChildCount += 1; 

      // Set HTML data 
      var html = '<div id="collapsibleScreen-"' + self.ChildCount + ' class="open">' + viewData + '</div>'; 

      target.html(html); 

      // Update screens collapse status 
      self.UpdateScreenBreadCrumb(collapseTitle, breadCrumbContainerId); 
     }); 
    }; 
} 

Функция UpdateScreenBreadCrumb работает и в противном случае не связаны.

Это называется (например), как это:

self.AddChild("/Partials/View1", "targetContainer", "View", "breadCrumbContainer"); 

Что она делает

Содержание Вид, форма, загружена, крошка обновляется правильно.

Что мне нужно фиксированная

На частичном виде, который был загружен, есть кнопка определяется следующим образом:

<button class="btn btn-primary" ng-click="AddPartialView()">Add partial view</button> 

При нажатии этой кнопки не имеет никакого эффекта. Если я добавлю console.log («Код был здесь.») В AddPartialView(), он не регистрируется. Установка значения ng-click непосредственно для предупреждения («hello») также не влияет.

Нет ошибок.

Любые предложения о том, как заставить эту кнопку работать?

Answer 1

Я изучил $ compile, как предложил Итамар Л., и получил его на работу. Образцы я нашел использовали директивы, а также, так что я в любом случае реализовать их:

angular.module('directives.api').directive("PartialViewLoader", [ 
    '$compile', 
    'chainedScreensService', 
    function (
     $compile, 
     chainedScreensService) { 
     return { 
      restrict: 'A', 
      scope: { 
       view: '=', 
       parent: '=' 
      }, 
      controller: function() { 
      }, 
      link: function (scope, element, attrs) { 

       chainedScreensService.GetPartialView(attrs.view).then(function (viewData) { 
        var linkFunc = $compile(viewData); 
        var content = linkFunc(scope); 
        element.append(content); 

        if (attrs.parent != 'undefined' && attrs.parent != undefined && attrs.parent.length > 0) { 
         chainedScreensService.CollapsePartialByIdentifier(attrs.parent); 
        } 
       }); 
      } 
     } 
    } 
]); 

Я использую это так:

<div ng-controller="collapseController"> 
    <div id="breadCrumbContainer" style="display: inline"></div> 
    <div id="mainContainer"> 
     <div id="personContainer" partial-view-loader view="persoon" parent="" class="open"></div> 
    </div> 
</div> 

Это само по себе показывает первую страницу, которая имеет кнопку к следующий, как уже упоминалось.Соответствующая функция, найденная в collapseController, заключается в следующем:

self.AddNextScreen = function (parentViewIdentifier, targetContainerId, breadCrumbContainerId) { 
    self.AddChildByDirective("NextScreen", parentViewIdentifier, targetContainerId, breadCrumbContainerId); 
} 

код AddChildByDirective:

self.AddChildByDirective = function (viewIdentifier, parentViewIdentifier, targetContainerId, breadCrumbContainerId) { 
    var html = '<div id="' + viewIdentifier + 'Container" fvl-partial-view-loader view="' + viewIdentifier + '" parent="' + parentViewIdentifier + '" class="open"></div>'; 

    var target = $('#' + targetContainerId); 

    var linkFunc = $compile(html); 
    var content = linkFunc($scope); 
    target.append(content); 

    self.UpdateScreenBreadCrumb(viewIdentifier, breadCrumbContainerId); 
} 

На данный момент я все еще нужно проверить фактическое формирование цепочки, но это работает, чтобы загрузить новый экран и свернуть предыдущий.

Answer 2

Что касается вашего вопроса, вы добавляете HTML, который не компилируется Angular. Вам нужно использовать компиляцию $ на недавно добавленном элементе HTML, а затем привязать его к области. Функция $ compile() возвращает функцию link(), которую вы используете для привязки области. Пример:

$compile(new-element)(scope-to-bind-to) 

ПРИМЕЧАНИЕ: Вы не должны манипулировать DOM с помощью контроллера. Это считается плохой практикой. Вы должны использовать настраиваемую директиву или какую-либо комбинацию угловых директив (ngIf, ngSwitch, ngInclude). Рекомендую посмотреть AngularJS best practices.