Javascript 使用Angularjs向页面添加模板/表单_Javascript_Angularjs_Angularjs Ng Transclude

Javascript 使用Angularjs向页面添加模板/表单

javascript angularjs

Javascript 使用Angularjs向页面添加模板/表单,javascript,angularjs,angularjs-ng-transclude,Javascript,Angularjs,Angularjs Ng Transclude,我是Angular的新手，正在尝试找到将模板动态添加/附加到页面的最佳方法。我将有一对模板不同的形式，当一个按钮被点击时，我希望其中一个模板显示，这取决于选择的选项。我不完全确定什么适合我的需要。我读过关于转移和包含的书，但我不知道哪一个（如果有的话）适合我的情况我尝试使用transclude，但无法添加/显示任何内容。我过去常作参考，但我一点运气都没有。这就是我试过的  <html ng-app = "testApp">

我是Angular的新手，正在尝试找到将模板动态添加/附加到页面的最佳方法。我将有一对模板不同的形式，当一个按钮被点击时，我希望其中一个模板显示，这取决于选择的选项。我不完全确定什么适合我的需要。我读过关于转移和包含的书，但我不知道哪一个（如果有的话）适合我的情况

我尝试使用transclude，但无法添加/显示任何内容。我过去常作参考，但我一点运气都没有。这就是我试过的

<!-- index.html -->
<html ng-app = "testApp">
    <some-component></some-component> <!-- this component has the button which the user clicks to display a form -->
    <div added-form>Content here</div> <!-- transclusion here -->
</html>


//javascript controllers/components
app.component("testApp", {
    templateUrl: '/static/angular-testapp/app/components/test-app/test-app.template.html',
    controller: function ($scope, $rootScope, $transclude) {
        ...
    }
});

app.component("someComponent", {
    templateUrl: '/static/angular-testapp/app/components/some-component/some-component.template.html',
    controller: function ($scope, $rootScope, $transclude) {

        //button that when clicked will add the template 
        $scope.addForm = function(event){
            console.log(event); //this shows, so I know the function is being reached
            app.directive('addedForm', function() { //I also tried added-form as the name
              return {
                transclude: true,
                template: "<div>the template</div><ng-transclude></ng-transclude>"
              };
            });
        }
    }
});

您可以这样尝试：

只需基于模型使用ng hide或ng show，即可显示适当的div、表单等

通过以下方式将选择绑定到

myDropDown

：

<select ng-model="myDropDown">
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

您可以这样尝试：

只需基于模型使用ng hide或ng show，即可显示适当的div、表单等

通过以下方式将选择绑定到

myDropDown

：

<select ng-model="myDropDown">
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

谢谢，但那不是我想要的。虽然这确实有效，而且我可以在未来的项目中使用它，但我想弄清楚为什么transclude不适合我。主要原因是，如果我要添加大型模板，我不希望它们出现在主html文件中，把事情弄得乱七八糟。谢谢，但这不是我想要的。虽然这确实有效，而且我可以在未来的项目中使用它，但我想弄清楚为什么transclude不适合我。主要原因是，如果我要添加大型模板，我不希望它们出现在主html文件中，使事情变得杂乱无章。

ng-show="myDropDown=='one'"