嵌套指令不编译

时间:2015-10-14 21:05:51

标签: angularjs angularjs-directive selectize.js

我有一个我创建的自定义指令,它将模板加载到模态窗口中。模态窗口本身就是一个模板,能够毫无问题地运行我的自定义指令。加载到模态中的模板包含另一个使用angular-selectize创建选择列表的指令。这是我的指示:

            Employee emp1 = new Manager();
            emp1.FirstName = txtFirst.Text;
            emp1.LastName = txtLast.Text;
            emp1.Ssn = Convert.ToInt32(txtSSN.Text);
            emp1.HireDate = Convert.ToInt32(txtHire.Text);
            emp1.TaxRate = Convert.ToDecimal(txtTax.Text);
            emp1.Email = txtEmail.Text;
            emp1.PhoneNum = Convert.ToInt32(txtPhone);

            if (emp1 is PartTime)
            {
                emp1.HourlyRate = txtRate.Text;
                emp1.HoursWorked = txtHrs.Text;
            } 
            if (emp1 is FullTime)
            {
                emp1.Salary = Convert.ToDecimal(txtSalary.Text);
                emp1.VacationDays = Convert.ToDouble(txtVacation.Text);
                emp1.SickDays = Convert.ToDouble(txtSick.Text);
                emp1.IsTaxExempt = comboTax.SelectedIndex == 0 ? true : false;
                emp1.HasInsurance = comboInsurance.SelectedIndex == 0 ? true : false;
            }
            if (emp1 is Manager)
            {
                (Manager)emp1.BonusEarned = Convert.ToDecimal(txtBonus.Text);
                (Manager)emp1.Department = comboDepartment.SelectedText;
                (Manager)emp1.OfficeLocation = txtOffice.Text;
            }

正确加载HTML,但是选择指令未初始化。

我在var dynamicTemplate = function($templateRequest, $compile) { return { restrict: "E", link: function(scope, element, attrs) { var modalOptions = JSON.parse(attrs.modalOptions); $templateRequest(modalOptions.Url).then(function(html) { $elem = $compile(html)(scope); element.append($elem); }); } } } 方法中已经厌倦了这个:

then

这给了我同样的结果。

我遇到的问题是我在编译HTML后收到此消息:

element.html(html)
$compile(element.contents())(scope);

我正在与the plunk合作。

3 个答案:

答案 0 :(得分:2)

如果你想让angular.element使用jQuery,你必须在角度加载之前在页面中包含jQuery。

更改脚本顺序后,演示工作正常

Updated demo

答案 1 :(得分:2)

第一个解决方案

你必须在index.html中的Angular.js之前包含jQuery.js。这个 magic 使angular.element可以使用jQuery。
Solution 1

第二种解决方案

您可以在第97行的angular-selectize.js中将element.selectize替换为$(element).selectize。这使得角度选择脚本可以使用jQuery的选择器而不是角度选择器。
Solution 2

答案 2 :(得分:0)

在Angular加载之前在页面中包含jQuery。然后angular.element将使用jQuery。