Question

我在我的应用程序中使用isteven-multi-select进行多项选择。一切正常，直到我在另一个模板中添加isteven-multi-select div。在这种情况下，我在输出模型中没有得到任何值。

在这里，我将其添加到另一个模板

中

<body ng-controller="MainCtrl">
   <div ng-include="'test.html'"></div>
   <button ng-click="a()">Print output</button>
   <p>selected scope: {{ selectedScope }}</p>
</body>

test.html -

 <section>
  <div>
    <div isteven-multi-select
        input-model="scopes"
        output-model="selectedScope"
        button-label="name"
        item-label="name"
        tick-property="ticked"
    >
    </div>
   </div>
</section>

Answer 1

ng-include创建继承所有父范围属性的新范围。因此，您应该将父母selectedScope传递给output-model属性：

<section>
   <div>
        <div isteven-multi-select
            input-model="scopes"
            output-model="$parent.selectedScope"
            button-label="name"
            item-label="name"
            tick-property="ticked"
        >
        </div>
    </div>
</section>

您可以阅读this article以更好地了解范围。

Answer 2

一旦在主控制器视图中包含元素

，它就会起作用

<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script>
    <link rel="stylesheet" href="angular-multi-select.css" />
    <script src="angular-multi-select.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <section>
   <div>
        <div isteven-multi-select
            input-model="scopes"
            output-model="selectedScope"
            button-label="name"
            item-label="name"
            tick-property="ticked"
        >
        </div>
    </div>
</section>
    <button ng-click="a()">Print output</button>
    <p>selected scope: {{ selectedScope }}</p>
    <p>selected scope: {{ scopes }}</p>
</body>
</html>

isteven-multi-select输出模型不使用模板

2 个答案: