ng-init 或 ng-bind 不适用于示例代码

Question

我的代码：

它很简单，但我不想要我错过：

<div ng-app="sample" ng-init="firstName='somnath'">
    <p>My name is: <span ng-bind="firstName"></span> 
    </p>
</div>

杰斯菲德尔

Answer 1

首先，同一页面上的两个ng-app不起作用，总是第一个是用角度读取的。 您需要使用 angular.bootstrap 在两个元素上初始化角度。

标记

<div id="app">
    <p>Name:
        <input type="text" ng-model="name" />
    </p>
    <h1 ng-bind="name" />
</div>
<div id="app1" ng-init="firstName='somnath'">
    <p>My name is: <span ng-bind="firstName"></span> 
    </p>
</div>

法典

var app = angular.module('app',[])
var app1 = angular.module('app1',[])
angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById('app'), ['app']);
    angular.bootstrap(document.getElementById('app1'), ['app1']);
});

更新的小提琴

Answer 2

此代码不同，但您可以看到它的工作原理，无法显示

<div ng-app="sample" ng-init="firstName='somnath'">
    <p>My name is: <span ng-bind="firstName"></span> 
    </p>
</div>

您需要将 firstName 分配给 ng-model（例如 ng-model="firstname"），然后只有它才会被视为属性，否则无法识别，因此无法显示。

 <div ng-app="" ng-init="name='somnath'" >
        <p>Name:
            <input type="text" ng-model="name" />
        </p>
    <p>
       My name is:<span ng-bind="name"></span> 
        </p>
    </div>