Javascript 角度-链接到包含部分_Javascript_Angularjs_Angularjs Directive_Angularjs Scope_Angularjs Ng Include

Javascript 角度-链接到包含部分

javascript angularjs

Javascript 角度-链接到包含部分,javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-include,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Include,我已经按照文档进行了设置并使其工作（在HTML部分中加载）以及在更改select选项时更改部分 $scope.templates = [ { name: 'Overview', url: 'partials/project/overview.html' }, { name: 'Tasks', url: 'partials/project/tasks.html' } ]; $scope.template = $scope.templates[0]; ---- <div n

我已经按照文档进行了设置并使其工作（在HTML部分中加载）以及在更改select选项时更改部分

$scope.templates = [
    { name: 'Overview', url: 'partials/project/overview.html' },
    { name: 'Tasks', url: 'partials/project/tasks.html' }
];
$scope.template = $scope.templates[0];

----

<div ng-controller="Tasks">
    <select ng-model="template" ng-options="t.name for t in templates">
        <option value="">(blank)</option>
    </select>

    <section ng-include="template.url"></section>
</div>

您只需要存储模板的路径，并根据列表中的操作对其进行更改。ngHref与此无关，因为它会加载模板本身，而这不是您想要的

请参阅此演示：

HTML:

但我真的建议你去签出去签出，因为听起来你好像在尝试实现一些标签系统，并改变你的应用程序的状态，ui路由器做得很好。

AngularJS核心中没有“Ngmodel”指令。啊，对了，这是一个输入错误，因为它将它修改为

ng model

。不过，这并没有起到任何作用：）

<ul class="header-menu">
    <li><a ng-modal="template" ng-href="{{template[0]}}" class="selected">Overview</a></li>
    <li><a ng-modal="template" ng-href="{{template[1]}}">Tasks</a></li>
</ul>

     <body ng-controller="MainCtrl">
      <ul>
      <li ng-repeat="template in templates">
      {{template.name}}
      <button ng-click="selectTemplate(template)">Go!</button>
      </li>
    </ul>
    {{selectedTemplate}}
    <div ng-include="selectedTemplate"></div>
  </body>

    app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.templates=[{
    name:'First Template',
    url:'template1.html'
  }
  ,{
    name:'Second Template',
    url:'template2.html'
  }
  ]

  $scope.selectedTemplate=$scope.templates[0].url;
  $scope.selectTemplate=function(template){
    $scope.selectedTemplate=template.url;
  }
});